[React] 리액트의 useEffect 훅에 대한 정리 ( feat. 리액트 라이프 사이클 제어 )

 

 

 

useEffect 학습전, 리액트의 라이프사이클에 대한 이해

 

리액트에서의 라이프 사이클은 크게 3단계로 나뉜다.

탄생 => 변화 => 죽음 이런 느낌인데.. 그래서 제어도 크게보면 저 3단계로 이루어진다.

(물론 라이프사이클 조금 더 들어가면 많다.. 그건 다음에 라이프사이클 공부하면서 정리해야지...)

 

대충 이런 느낌..

 

useEffect 훅을 이용하면 리액트의 라이프사이클 중 개발자가 원하는 시점을 잡아서

원하는 로직을 콜백함수에 담아 호출 할 수 있다.

 

 

 

useEffect 훅이란?

 

useEffect란 컴포넌트의 사이드 이펙트를 제어하기 위해서 16.8버전에 추가 된 훅 중 하나로,

여기서의 사이드 이펙트란 부정적인 효과가 아닌, 컴포넌트의 변화에 따라 생기는 여러 효과를 의미한다.

 

이런 느낌

 

 

결국 useEffect는 컴포넌트의 동작(상태)의 변화를 제어하기 위해 생겨 난 것이다.

크게 보면 아래와 같이 마운트, 업데이트, 언마운트시에 사용되는데...

 

 

 

자세한 내용은 기본문법과 샘플코드를 보면서 이해 해보도록 하자..

 

 

useEffect 기본 문법

 

기본문법

// useEffect import
import { useEffect } from "react";

useEffect(() => { 
    // 개발자가 원하는 로직
  }, [의존성 배열])

 

 

useEffect는 기본적으로 2개의 인자를 갖는다.

첫번째 인자는 사용자가 원하는 로직을 담은 콜백함수이고,

두번째 인자는 감시 할 state를 가지는 의존성 배열이다..( state를 여러개 넣을 수도 있음.. )

 

물론 리액트에서 제공하는 훅이기 때문에, 사용하려면 import는 필수!

 

 

useEffect로 라이프사이클 제어하는 3가지 방법

 

 

1. 마운트(mount)시 시점을 제어할 경우

useEffect(()=> {}, [])

 

useEffect는 deps안에 있는 값이 변경되어야한 콜백함수가 호출이 되기 때문에

빈배열을 넣으면 첫 마운트시에만 콜백함수가 호출이 되고 더이상 호출이 되지 않는다.

 

=> 첫 마운트(mount)시 최초 한번만 콜백함수를 호출함

 

 

2. 컴포넌트가 변경( update )된 시점 + 리랜더링 된 시점

useEffect(()=> {})

 

2번째 인자값을 넣지 않으면 컴포넌트가 변경될 때마다(리랜더링) 콜백함수가 호출된다.

 

 

3. 특정 state의 값이 변경(update)된 시점을 제어하는 경우

useEffect(()=> {}, [a, b, c])

 

2번째 인자로 배열안에 state값을 넣어준다. 

이때는 해당 배열내에 있는 state의 값이 변경될 때만 콜백함수를 호출한다.

 

이때 해당 배열의 변경시점을 의존하기 때문에, 의존성 배열(dependency array)이라고 부른다..

 

 

4. 언마운트(unmount) 시점을 제어하는 경우

useEffect(() => {
    // 컴포넌트가 마운트될 때 실행될 코드
    return () => {
      // 컴포넌트가 언마운트(unmount)될 때 실행될 코드
      // 언마운트(unmount)될 때 실행되기 때문에 클린업/정리함수라고도 부른다.
    };
  }, []);

 

 

 

useEffect는 useState와 함께 가장 많이 쓰이는 훅 중 하나니까. 잘 기억해두자...