react hook useEffect 와 의존성 배열

useEffect

react 가 렌더링 될 때마다 실행된다는 특징이 있다.

• 처음 렌더링 될 때(마운트)
• 특정 값이 변경될 때(업데이트)
• 삭제될 때 (언마운트) 

또한, 어떤 props/state가 변경될 때 실행할지를 정할 수 있는데, 이때 의존성 배열을 사용한다.

 

의존성 배열

useEffect를 실행할 값을 지정하는 배열이다.

 

1. 의존성 배열을 선언하지 않은 경우

아래의 코드는 어떤 state 값이 변경되는지 상관없이 useEffect 가 실행된다.

const [num, setNum] = useState(0);
const [color, setColor] = useState('');

useEffect(() => {
  console.log('실행');
});

 

 

2. 의존성 배열을 빈 값으로 지정했을 경우

처음 화면이 렌더링 됐을 경우 한 번 실행된다.

const [num, setNum] = useState(0);
const [color, setColor] = useState('');

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

 

 

3. 의존성 배열에 값을 지정했을 경우 (props / state)

num의 값이 변경됐을 경우에만 실행된다.

const [num, setNum] = useState(0);
const [color, setColor] = useState('');

useEffect(() => {
  console.log('실행');
}, [num]);

 

 

clean up function 클린 업 함수

return 문에 함수를 넣어서 컴포넌트가 사라질 때 실행할 함수를 정의할 수 있다.

또한, 값이 변경되기 전의 값을 출력할 수 있다.

 

[활용되는 상황]

• 타이머 함수 종료(setTimeout, clearTimeout 등등)
• 이벤트 해제

const [num, setNum] = useState(0);
const [color, setColor] = useState('');

useEffect(() => {
  console.log(`현재 ${value} 입니다`);
  //클린업 함수
  return () => {
    console.log(`이전 ${value} 입니다`)
  }
}, [value]);