useEffect 활용

0. React의 LifeCycle

React의 컴포넌트에는 생명주기라는 것이 존재한다.
탄생 - 변화 - 죽음으로 이해하면 쉽다.
탄생 : mount (화면에 나타나는 것)
변화 : update (리렌더)
죽음 : unmount (화면에서 사라지는 것)

이 각각의 상태에서 알맞는 작업을 통해 이 life cycle을 제어할 수 있게된다. 예를 들어, mount 단계에서는 초기화 작업을 하거나 update 단계에서 예외 처리 작업을 하거나 unmount시 메모리 정리 작업을 하는 부분들이 바로 life cycle 제어라고 볼 수 있다.

한 가지 짚고 넘어가자면, 이런 life cycle을 제어하기 위해 사용하는 메서드(componentDidMount 등)들은 클래스형 컴포넌트만 사용할 수 있다. 따라서 함수형 컴포넌트는 이런 메서드로 제어가 불가능했다. 하지만, 이런 부분을 보완하고자 use 키워드를 사용한 다양한 hooks가 나왔고, 함수형 컴포넌트에서도 useState, useEffect 등 상태와 생애주기 등을 관리할 수 있게 되었다.
클래스형 컴포넌트에서 사용하던 기능을 그대로 hooking 해서 함수형에서 사용할 수 있게 해주기 때문에 react hooks이라고 부른다.

1. useEffect의 사용

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

첫 번째 파라미터로 콜백함수가 들어가고, 두 번째 파라미터로 dependency Array(의존성 배열)가 들어가게 된다.
이때 depc에 들어있는 값이 변할때마다, 콜백함수가 실행된다.

1-1. mount시 사용

컴포넌트가 mount 된 시점에서 작업해주고 싶을 때는 아래와 같이 빈 배열을 사용해주면 된다.

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

1-2. update시 사용

컴포넌트가 update 되는 시점마다 작업해주고 싶을 때는 아래와 같이 콜백함수만 사용하면 된다.

useEffect(()=> {})

혹은 변화하는 값을 배열에 넣어 사용하면 된다.

let [count, setCount] = useState(0);
useEffect(()=> {}, [count])

1-3. unmount시 사용

컴포넌트가 unmount 되는 시점에 작업해주고 싶을 때는 아래와 같이 콜백함수의 리턴 값으로 unmount시 작업할 콜백함수를 작성해주면 된다.

const UnMount = () => {
	useEffect(()=> {
    	console.log('mount!');
      	return ()=> { 
          	// unmount시 작동
        	console.log('unmount!!');
        }
    },[]);
  	return <div>unmount testing!</div>
};