
[React] useEffect 의존성 배열
2022. 5. 28. 15:29
개발이야기/React.js
의존성 배열은 useEffect 훅에 입력하는 두 번째 매개변수이다. 의존성 배열은 잘못 관리하면 쉽게 버그로 이어지기 때문에 입력하지 않는게 좋지만 필요에 있어 입력할 일이 생긴다. 그 필요에 의한 경우를 살펴보자. 👇 useEffect(() => { fetchUser(userId).then((data) => setUser(data)); }); 위의 코드의 fetchUser가 렌더링될 때마다 호출되기 때문에 비효율적이다. 이럴때 의존성배열을 사용해줌 👇 useEffect(() => { fetchUser(userId).then((data) => setUser(data)); }, [userId]); 의존성 배열에 userId 상태 값을 넣으면 userId가 변경될 때만 fetchUser 함수가 호출된다. ..