개발이야기/React.js
[React] useEffect 의존성 배열
code지니어스
2022. 5. 28. 15:29
의존성 배열은 useEffect 훅에 입력하는 두 번째 매개변수이다.
의존성 배열은 잘못 관리하면 쉽게 버그로 이어지기 때문에 입력하지 않는게 좋지만
필요에 있어 입력할 일이 생긴다.
그 필요에 의한 경우를 살펴보자.
👇
useEffect(() => {
fetchUser(userId).then((data) => setUser(data));
});
위의 코드의 fetchUser가 렌더링될 때마다 호출되기 때문에 비효율적이다.
이럴때 의존성배열을 사용해줌
👇
useEffect(() => {
fetchUser(userId).then((data) => setUser(data));
}, [userId]);
의존성 배열에 userId 상태 값을 넣으면 userId가 변경될 때만 fetchUser 함수가 호출된다.
(추후에 새로 추가되는 변수가 있다면 그 변수도 의존성 배열에 넣어주어야 함)
보통은 처음 렌더링 될 때 한번만 데이터를 불러오기위해 [] 빈배열로 많이 사용하지만,
우리가 장바구니같은 기능을 만든다고 할 때
(장바구니는 물건에 대한 어떠한 데이터를 불러와야만 장바구니에 물건을 담을 수 있다.)
만약 의존성배열을 []빈배열로 놔둔다면
장바구니에 물건을 넣어도 []빈배열은 최초 실행 1번만 렌더링되기때문에
아무런 변화가 일어나지않는다. === 물건이 담기지않음
그래서 ?
⭐이럴땐 의존성배열에 장바구니실행 코드를 넣어주면
장바구니 기능을 만들 수 있다.