👩🏻‍💻 useEffect 종속성 (dependency array)

Hook이란, class를 작성하지 않고도 React의 기능들을 사용할 수 있게 해주고, 함수 컴포넌트에서 생명주기 기능을 할 수 있게 해주는 함수이다.
(이전 React에서 상태 관리를 할 때는 Class 컴포넌트에서 setState를 통해 상태 구현을 했지만, Hook에서는 useState라는 함수를 사용하여 Fucntion 컴포넌트에서도 사용이 가능하다.)
useEffect는 컴포넌트 내에서 Side Effect를 실행할 수 있게 하는 Hook이다. useEffect를 사용할 때 가장 신경써야할 부분은 종속성이다.

함수의 로컬 상태를 함수 외부에서 변경하는 경우 Side Effect가 발생했다고 한다.

📌 렌더링 될 때마다 useEffect가 실행된다.

useEffect(() => {
	// Runs after EVERY rendering
}); 

Dependency Array(의존성 배열)이 작성되어 있지 않아 Callback함수가 렌더링 될 때마다 useEffect가 실행된다. 여기서 중요한건 의존성 배열을 명시하지 않고 state를 변경하는 작업을 한다면 무한루프가 발생하니 조심해야 한다.

📌 처음 렌더링 때에만 useEffect를 실행시킨다.

useEffect(() => {
	// Runs once, after mounting
}, []);

여기서도 배열을 종속성으로 사용할 경우 useRef Hook을 사용하면 참조가 변경되지 않도록 변경 가능한 객체가 반환된다. 그리고 객체를 생성할 때에는 useMemo를 사용하여야 한다.

📌 처음 렌더링 될 때와 defendency array안에 있는 value값이 바뀔 때만 useEffect를 실행시킨다.

useEffect(() => {
	// Runs after EVERY rendering
}, [prop, state]);  

종속성에 대해 알기 전에 Lifecycle를 이해하는 공부를 해야한다.