React - Lifecycle과 useEffect 1

컴포넌트의 Lifecycle

우리가 만들고 쓰고있는 컴포넌트는 Lifecycle이라는 개념이 있습니다. 

컴포넌트도 인생이 있다는 말입니다.

 

컴포넌트는 

1. 생성이 될 수도 있고 ( mount )
2. 재렌더링이 될 수도 있고(update)
3. 삭제가 될 수도 있습니다( unmount )

컴포넌트의 Lifecycle을 배우는 이유는 컴포넌트 Lifecycle 중간중간에 간섭할 수 있기 때문입니다.

간섭이 뭐냐면 코드실행인데 컴포넌트가 장착이 될 때 특정코드를 실행할 수 도 있고

 

 

컴포넌트가 업데이트될 때 특정코드를 실행할 수 도 있다는 겁니다. 

 

 

간섭하는 방법

" Detail 컴포넌트 등장 전에 이것좀 해줘"

" Detail 컴포넌트 사라지기 전에 이것좀 해줘"

" Detail 컴포넌트 업데이트 되고나서 이것좀 해줘" 이렇게 코드좀 실행해달라고 간섭할 수 있는데 갈고리를 달아야 합니다.

갈고리를 달아서 코드를 넣어주면됩니다. 갈고리는 영어로 hook이라고합니다. 그래서 저걸 Lifecycle hook 이라고부릅니다.

 

 

 

옛날 React에서 Lifecycle hook 쓰는법

예전엔 class 문법으로 컴포넌트를 만들었습니다. 

그 경우엔 안에 함수명을 저렇게 써주면 각각 특정 Lifecycle에서 코드를 실행할 수 있었습니다. 

class Detail2 extends React.Component {
  componentDidMount(){
    //Detail2 컴포넌트가 로드되고나서 실행할 코드
  }
  componentDidUpdate(){
    //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드
  }
  componentWillUnmount(){
    //Detail2 컴포넌트가 삭제되기전에 실행할 코드
  }
}

 

 

요즘 React에서의 Lifecycle hook

상단에서 useEffect import해오고 콜백함수 추가해서 안에 코드 적으면 이제 그 코드는 컴포넌트가

mount( 생성 ) & update ( 재렌더링 ) 시 실행됩니다. 그래서 이게 Lifecycle hook입니다. 

import {useState, useEffect} from 'react';

function DetailPage(){

  useEffect(()=>{
    //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행
    console.log('안녕')
  });
  
  return (생략)
}

진짜 DetailPage 로드시 콘솔창에 '안녕'이 출력되나 확인해보겠습니다.

잘출력됩니다. 

 

재랜더링시에도 출력이되나 확인해보겠습니다.

버튼을 하나 만들어 useState의 값을 증가시켜보겠습니다.

import {useState, useEffect} from 'react';

function Detail(){

  useEffect(()=>{
    //여기적은 코드는 컴포넌트 로드 & 업데이트 마다 실행됨
    console.log('안녕')
  });

  let [count, setCount] = useState(0)
  
  return (
    <button onClick={()=>{ setCount(count+1) }}>버튼</button>
  )
}

 

버튼을 누를때마다 안녕이 출력됩니다. 

 

 

ussEffect를 사용하는 이유

사실 위의 코드에서 useEffect 바깥에 적어도 똑같이 컴포넌트 mount & update 시 실행됩니다.

컴포넌트가 mount & update 시 function안에 있는 코드도 다시 읽고 지나가서 그렇습니다. 

그럼 대체 왜 useeEffect를 만들어 놓은 것일까요?

 

useEffect 안에 적은 코드는 html 렌더링 이후에 동작합니다.

 

예를 들어서 굉장히 시간이 오래걸리는 쓸데없는 코드가 필요하다고 가정해보면 

아래에서 보면 반복문 돌리고 나서 하단의 html을 보여줍니다. 

function Detail(){

  (반복문 10억번 돌리는 코드)
  return (생략)
}

 

그런데 useEffect안에 적으면 html을 보여주고 나서 반복문을 돌립니다. 

function Detail(){

  useEffect(()=>{
    (반복문 10억번 돌리는 코드)
  });
  
  return (생략)
}

이런식으로 코드의 실행지점을 조절할 수 있기 때문에 조금이라도 html 렌더링이 빠른 사이트를 원하면

쓸데없는 것들은 useEffect안에 넣는 것이 좋습니다. 

 

그래서 리액트를 만드신 분이 이 함수를 useEffect라고 작명한 이유도 알 수 있는데

함수안에 이것저것 코드를 짤 때 

함수의 핵심기능 외에 쓸데없는 기능들을 프로그래밍 용어로 side effect라고 부릅니다. 

그래서 useEffect도 거기서 따온 것이고 컴포넌트의 핵심기능은 html 렌더링이라 그거 외의 쓸데없는 기능들은 

useEffect안에 적으라는 소리입니다. 

(오래걸리는 반복연산, 서버에서 데이터가져오는 작업, 타이머다는거)