[React] 리액트 Hooks - useEffect와 useLayoutEffect

useEffect

DOM의 렌더링 이후 리액트 함수 컴포넌트에 어떤 일을 수행해야하는지 알려주기 위해 useEffect 훅을 활용할 수 있다. 그럼 useEffect의 타입정의를 알아보자.

 

function useEffect(effect: EffectCallback, deps?: DependencyList): void;
type DependencyList = ReadonlyArray<any>;
type EffectCallback = () => void | Destructor;

 

useEffect의 첫번쨰 인자로는 effect 타입인 아무것도 반환하지 않는(void) Callback 함수이다. Promise 타입은 반환하지 않으므로 비동기 함수는 들어갈 수 없다.

 

두번째 인자인 deps는 옵셔널하게 제공되며 effect가 수행되기 위한 조건을 나열한다. useEffect는 deps가 변경되었는지 얕은 비교(shallow compare)로만 판단하기 때문에, 객체의 참조값이 변경되면 콜백함수를 실행한다. 부모에서 받은 인자를 직접 deps로 부여할 경우 원치 않는 렌더링을 반복할 수 있으니 유의하자!

 

useEffect는 살펴본 것처럼 Destuctor를 반환하는데 이것은 컴포넌트가 마운드 해제될 때(Unmount) 실행하는 함수이다.

 

 

또한 useEffect는 ComponentDidUpdate와 같은 생명주기와 다르게, 레이아웃 배치와 화면 렌더링이 모두 완료된 후에 실행된다.

 

 

useEffect와 useLayoutEffect

useEffect와 비슷한 역할을 하는 hook으로 useLayoutEffect가 있다. 이 hook의 타입 정의역시 useEffect와 동일하며 하는 역할에 차이가 있다.

 

useLayoutEffect는 화면에 컴포넌트가 그려지기 전에 콜백함수를 실행하기 때문에 useEffect가 실행되어 렌더링 이후 값을 세팅하는 빈 공간의 표시를 방지할 수 있다.

 

//useEffect
const [name, setName] = useState('');

useEffect(() => {
    //매우 긴 시간이 흐른뒤 아래의 setName()이 실행된다고 가정한다.
    setName('배달이');
}. []);

return (<div>{안녕하세요, ${name}님!}</div>);

//expected result 
//"안녕하세요, 님!" 으로 표시된 수초 이후, 다시 "안녕하세요, 배달이님!"으로 리렌더링 될 것이다.

 

 

//useLayoutEffect
const [name, setName] = useState<string | undefined>('');

useLayoutEffect(() => {
    //매우 긴 시간이 흐른뒤 아래의 setName()이 실행된다고 가정한다.
    setName('배달이');
}. []);

return (<div>{안녕하세요, ${name}님!}</div>);