지난포스팅에서 Hooks의 useState에 대해 알아보았습니다.
이번 시간에는 useEffect에서 알아봅시다.

useEffect

useEffect(effectFunction[, deps])

• effectFunction : 실행하고자하는 동작
• deps(dependency array): 배열형태이며 존재 유무와 형태에 따라 effectFunction이 실행되는데 차이를 줌

useEffect로 할 수 있는 일

• useEffect는 component가 mount, unmount, update 됐을 때 특정 작업을 처리할 수 있음.
• 클래스형 컴포넌트의 componentDidMount, componentWillUnmount, componentWillUpdate와 유사한 기능을 가지고 있음.
  

(이전 포스팅 참고 👉 React | 라이프 사이클 API 흐름 내려다보기)

How to useEffect

• 여기서도 코드를 보며 이해하도록 합시다. 지난번 setState 예제코드를 커스텀하였습니다. 아래를 보시죠.

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

function Example() {
  useEffect(() => {console.log('work~!')}) 👈 👈
  
  const [firstCount, setFirstCount] = useState(0); 
  const [secondCount, setSecondCount] = useState(0); 

  useEffect(() => {console.log('firstCount~!')}, [firstCount]) 👈 👈 👈
  
  return (
    <div>
      <button onClick={() => setFirstCount(firstCount + 1)}> 
        Click me1
      </button>
      <button onClick={() => setSecondCount(secondCount + 1)}>
        Click me2
      </button>
    </div>
  );
}

• 👈 처럼 useEffect 함수를 불러옵니다.

Component가

Mount, Update 됐을 때

• 👈 👈 를 보시면 deps 위치에 아무 값도 넣지 않았습니다.
• 이렇게 되면 mount, update 할때 useEffect 작동하게 됩니다.
• 해당 코드를 실행하고 콘솔을 열어보시면 처음 마운트가 되었을때 work~! 가 찍혔을 것이고, Click me1, Click me2 버튼을 눌렀을 때 업데이트가 되므로 똑같이 work~!가 찍히게 됩니다.

특정 부분만 Update 됐을 때

• 특정 Update에만 실행하고 싶을때는 👈 👈 👈 코드를 참고하시면 됩니다.
• deps에 넣은 [firstCount] 값이 변할때만 effectFunction이 실행되게 됩니다.
• 즉, 마운트 될때 effectFunction 실행된 후 Click me1을 누를때는 effectFunction이 실행되며 Click me2을 눌렀을 때는 effectFunction이 실행되지 않습니다.

Mount 됐을 때만

• 컴포넌트가 최초 마운트 되었을 때만 effectFunction을 실행하고 싶다면
  👈 👈 👈 코드를 아래와 같이 수정하면 됩니다.
• deps에 빈 배열 [ ]을 넣어주면 됩니다.

  useEffect(() => {console.log('work~!')}, []) 

Unmount 됐을 때(+Update되기 직전일 때)

• useEffect에서는 함수를 반환할 수 있습니다 이를 cleanup(뒷정리) 함수라고 부릅니다.
• 👈 👈 👈 코드를 아래와 같이 수정해 봅시다.

  useEffect(() => {
      console.log('work~!');
     👉 return() => { 
      	console.log('cleanup~!')
      };
  }, []);

• 👉 표시부분이 cleanup 함수 입니다.
• 언마운트 됐을때 cleanup 함수를 실행시키고 싶으면 위 코드처럼 빈 배열 [ ]을 넣으면 되고
• 특정 값이 Updata 되었을 때 cleanup 함수를 실행시키고 싶으면 deps에 원하는 값을 특정해 주면 됩니다.

정리

• useEffect는 component가 mount, unmount, update 될 때 특정 작업을 처리할 수 있음
• 클래스형 컴포넌트의 componentDidMount, componentWillUnmount, componentWillUpdate의 기능 대체가 가능해짐.
• deps는 생략, [ ], [특정데이터] 로 설정할 수 있으며 이에 따라 useEffect가 다르게 동작하게 한다.