[React] 의존성 배열이란?

Intro

react의 의존성 배열에 대해서 알아보자.

의존성 배열

의존성 배열이란 useEffect 훅에 입력하는 두 번째 매개변수를 뜻한다. 의존성 배열의 내용이 변경되었을 경우 부수 효과 함수가 실행된다.

Case

1. useEffect(effect)

컴포넌트가 렌더링될 때마다 호출된다.

2. useEffect(effect, [])

첫 번째 렌더링 후에만 호출된다.

3. useEffect(effect, [userId])

첫 번째 렌더링 후에 호출되며, 이후에 userId가 변경될 때마다 호출된다.

3번에서 userId 라는 값은 항상 렌더링과 관련된 값이어야 한다. 렌더링과 관련된 값 이라는 것은 그 값이 변경되면 컴포넌트가 다시 렌더링 되는지를 보고 알 수 있다. 어떤 변수의 값이 변경됐는데 컴포넌트가 다시 렌더링되지 않는다면 그 변수는 deps 배열에 넣을 필요가 없다. 결국 렌더링과 관련된 값 이라는 것은 컴포넌트 상태값, 속성값 등을 말하는 것이며, 전역 변수 등은 렌더링과 관련된 값 이 아니다.

https://hsp0418.tistory.com/134
https://choihaneul9545.tistory.com/38