A
useEffect는 컴포넌트의 생애주기와, 의존성 배열에 담긴 값의 변화에 따라 함수가 호출됩니다.
컴포넌트의 생애주기는 mount - update - unmount 로 이루어집니다.
먼저 의존성 배열을 넘기지 않는다면, 초기 마운트 시점과 매 렌더링마다 실행됩니다.
의존성 배열이 비어있다면, 마운트 될 때, 1번만 실행합니다.
반면 특정 값이 들어 있다면, 그 값이 업데이트 될 때마다 호출됩니다.
useEffect가 반환하는 함수는 클린업 함수로, 컴포넌트가 언마운트 될때 실행하고,
의존성 배열 값이 변해 리렌더링될때 먼저 실행된 후, 새로운 effect를 실행합니다.
이 함수를 이용해서 이벤트 리스너 제거, 타이머 해제, 메모리 정리 등의 작업을 할 수 있습니다.
Q useEffect는 왜 렌더링 중 실행되지 않고, 렌더링 후 실행될까요?
렌더링 단계는 순수 함수처럼 동작하는 원칙으로, 부수효과를 일으키는 useEffect는 렌더링이 종료된 후에 실행한다.
Q 의존성 배열에 state가 아닌 객체를 넣으면 어떤 문제가 발생할 수 있을까요?
의존성 배열에 들어있는 값을 얕은 비교(Object.is)를 통해 변경 여부를 파악한다.
따라서, 렌더링 후 생성된 객체를 의존성 배열에 넣게 되면, 매 렌더링 마다 새로운 참조값을 가지기 때문에 useEffect가 불필요하게 실행될 수 있다.
이를 방지하려면 useMemo를 사용하여 참조값을 캐싱하거나, 객체가 아닌 객체의 특정 속성만 추가하여 사용할 수도 있다.
Q useEffect 내부에서 async를 직접 사용하면 왜 문제가 되나요?
useEffect의 콜백함수는 클린업 함수를 반환할 수 있는 동기함수이다.
async 함수는 항상 promise를 반환하기 때문에 리액트는 에러를 호출하게 된다.
즉시 실행함수를 사용하거나 async 함수를 내부에 정의하고 호출해야 사용할 수 있다
