React Hook｜useEffect

개요

useEffect 함수는 React component가 렌더링 될 때마다 특정 작업을 실행해줄 수 있는 Hook입니다.
useEffect를 이해하기 위해서 class형에서 사용할 수 있었던 React lifecycle을 보면 더 쉽게 이해할 수 있습니다. component가 mount 됐을 때 사용하거나 unmount, update등 함수의 이름이 직관적으로 작성되었습니다.

useEffect의 사용

기본 useEffect의 형태는
useEffect( () => { function }, [deps]);
첫 번째엔 함수, 두 번째엔 배열(dependency)

useEffect(() => { //componentDidMount, componentDidUpdate 역할을 합니다. (1:1의 대응은 아닙니다)
  function()
  return () => { //componentWillUnmount 역할 cleanup함수
  	function()
  }
}, [] //deps, 의존성 배열이라고함);

1. component가 mount 됐을때

• 컴포넌트가 화면에 처음으로 렌더링 될 때 한 번만 실행하고 싶은 경우

useEffect(() => {
	console.log('mount될 때 첫 실행');
}, []); //꼭 빈배열을 넣어줘야한다. componetDidMount의 역할

useEffect(() => {
	console.log('리렌더링 될 때 마다 실행');
}); //빈 배열을 넣어주지않으면 리렌더링 될 때마다 실행됨.

2. component가 update될 때

• 특정 값(아래에서 count)이 update 될 때 실행하고자 하면 [ ]안에 바뀌는 값을 넣어줍니다.
• 배열에 특정 값을 넣게 되면 처음 mount 될 때도 실행되고, count가 바뀔 때도 실행됩니다.

useEffect(() => {
  console.log('update될 때 실행');
  console.log(count);
},[count]);

3. component가 unmount될 때, update 되기 직전

• 빈 배열을 넣은 상태에서 아래와 같이 사용하면 mount 될 때 실행되고, unmount 될 때 return 안의 함수가 실행됩니다.
• 특정 값이 update되기 직전에 cleanup 함수를 실행하고 싶을 때 배열안에 값을 넣어줍니다.

useEffect(() => {
  console.log('컴포넌트 mount!');
  
  return () => {
    console.log('컴포넌트 unmount!');
  }
}, []);

배열(deps)안의 값

• 배열 안에 특정 값을 넣게 되면 처음 mount 될 때, 특정 값이 변할 때, unmount 될 때, 값이 변하기 직전에 모두 실행됩니다.
• useEffect 안에서 사용하는 state, props가 있다면 그 값을 배열 안에 넣어주는 것이 규칙입니다. 넣어주지 않으면 useEffect안의 함수가 실행될 때 최신 state, props를 가리키지 않습니다.