[React] useEffect 의존성 배열

의존성 배열은 useEffect 훅에 입력하는 두 번째 매개변수이다.

의존성 배열은 잘못 관리하면 쉽게 버그로 이어지기 때문에 입력하지 않는게 좋지만

필요에 있어 입력할 일이 생긴다.

 

그 필요에 의한 경우를 살펴보자.

👇

useEffect(() => {
  fetchUser(userId).then((data) => setUser(data));
});

 

위의 코드의 fetchUser가 렌더링될 때마다 호출되기 때문에 비효율적이다. 

이럴때 의존성배열을 사용해줌

 

👇

useEffect(() => {
  fetchUser(userId).then((data) => setUser(data));
}, [userId]);

의존성 배열에 userId 상태 값을 넣으면 userId가 변경될 때만 fetchUser 함수가 호출된다.

(추후에 새로 추가되는 변수가 있다면 그 변수도 의존성 배열에 넣어주어야 함)

 

보통은 처음 렌더링 될 때 한번만 데이터를 불러오기위해 [] 빈배열로 많이 사용하지만,

우리가 장바구니같은 기능을 만든다고 할 때

(장바구니는 물건에 대한 어떠한 데이터를 불러와야만 장바구니에 물건을 담을 수 있다.)

만약 의존성배열을 []빈배열로 놔둔다면 

장바구니에 물건을 넣어도 []빈배열은 최초 실행 1번만 렌더링되기때문에 

아무런 변화가 일어나지않는다. === 물건이 담기지않음

그래서 ?

 

⭐이럴땐 의존성배열에 장바구니실행 코드를 넣어주면 

장바구니 기능을 만들 수 있다.