[React Hook 리액트 훅] 1. useEffect() hooks (LifeCycle)

오늘 알아볼 훅은 기본중의 기본인 useEffect() hook 이다.

사실 처음에 리액트를 배울떄 useState 와 셋트로 거의 초반에 배우는것인데 대충 어떻게 흘러가는지만 알고 정확히는 몰랐던거 같아서 

정리삼아 쓰려고 한다.

 

리액트 컴포넌트는 Lifecycle 이라는 개념이 있다.

컴포넌트는 생성이 될수도있고 (mount) , state가 바뀌었을때 재렌더링이 될 수도 있고 (update), 컴포넌트가 삭제 될 수도있다.(unmount)

 

이렇게 컴포넌트에 페이지 장착시, 업데이트시, 제거시 코드 실행이 가능하다.

 

옛날 클래스 버전의 useEffect라고 보면 된다. 함수를 하나씩 선언해서 각자 맞게끔 이용했었어야했다.

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

 

 

 

import React, { useEffect, useState } from 'react';

const Hooks = () => {

  const [ number , setNumber ] = useState(0);

  const increase = () => {
    setNumber((prev)=>{
      return prev + 1 ;
    })
  }

  useEffect(()=>{
    console.log('render!');
  });

  return (
    <div>
      {number}
      <button onClick={increase}>증가!</button>
    </div>
  );
};

export default Hooks;

위에 코드가 함수형 컴포넌트의 리액트 훅중에 useEffect() 라는건데 , useEffect() 안에  console.log('redner!)은 처음에 화면이 마운트 될때 , 그리고 state값이 변경(업데이트) 가 될때마다 계속 호출이 될것이다.

 

예를 console.log()로 들어서 그렇지만 , useEffect() 안에 있는 로직이 매우 복잡하다면 매번 state가 변경 될때마다 화면을 다시 그리는 작업이 될것이다. 이는 속도나 성능이슈에서 많이 안좋을것이다. 

increase()라는 함수로 {number} 을 클릭할때마다 1씩 증가되는것인데 , 1이 증가 될때마다 cosole.log() 메시지가 계속 뜰것이다.

 

중간 TIP

useEffect()는 말그대로 side effect 기능 ( 함수기능 외 쓸데 없는 기능들 )을 useEffect() 함수 안에 넣고 처리 하면 된다.

예를 들어 오래걸리는 loop연산 , fetch나 axios로 데이터를 get요청 할때  , setTimeOut() 등 컴포넌트 렌더링의 핵심기능이 아닌것들을

useEffect() 스코프 안에 처리하면 된다.

 

 

 

  useEffect(()=>{
    console.log('render!');
  },[number]);  //dependency

여기서 끝이 아니다 

useEffect()의 두번째 파라미터로 [ ](dependency) 를 넣을 수 있는데거기에 변수나 state같은 것들을 넣을 수 있다.

그렇게 하면 [ ]에 있는 변수나 state 가 변할 때만 useEffect 안의 코드를 실행 해준다.

그래서 위의 코드는 number이라는 state가 변할 때만 useEffect 안의 코드가 된다.

[ ]에 아무것도 안넣으면 처음에 화면이 렌더링(마운팅)이 되고 실행하고나서 다시는 실행을 안하게 된다.

말그대로 dependency는 의존성 이라는 뜻이기때문에 의존할 state 및 변수만 콜백인자로 넣어주면 될것같다.

 

(참고) [ ] 안에 state 여러개 넣을 수 있음 

 

정리 하면서.. 무거운 작업(위에 말했던 예제들) 기능들을 처리할때 useEffect()를 이용하면 좋을것같다.

그리고 더 알아보려면 useEffect()의 clean up function 도 같이 알아보면 좋을것같다.