useLayoutEffect hook 필요성 및 사용 예시

useState를 사용하여 정의할 때를 생각해보면,

주로 DB를 통해서 데이터가 바뀌는 값이나 혹은 이벤트 핸들링을 통해 UI 바뀌는 값등

"변하는"값에 한정해 useState를 작성하게 된다.

 

이 중, useState의 초기값에 따른 렌더링 이슈를 한번 쯤은 경험해 볼 수 있다. 가령

const [age, setAge] = useState(3);

으로 정의되어 있는 useState가 있고, 해당되는 useState가 렌더 되어야 하는 컴포넌트에

 

useEffect(() => {
	setAge(20);
}, [])

을 넣어 컴포넌트를 렌더하면 

age가 0이었다가 20으로 바뀌는 걸 볼 수 있다.

 

이런 현상은 주로, useState에 데이터 초기값을 넣어줄 때 종종 생기는 이슈이다.

 

이때, useEffect가 아닌, useLayoutEffect를 적용하면 이 문제를 쉽게 해결할 수 있다.

 

이러한 차이는 useEffect와 useLayoutEffect의 동작 시점에 따라 달려있다. 

 

useEffect의 경우 브라우저가 Dom의 레이아웃 배치와 페인트가 끝난 후 effect함수를 호출하지만, 

useLayoutEffect는 브라우저가 DOM 화면을 그리기 전에 effect를 수행하기때문에,

렌더하자 마자 age의 상태값이 20으로 보일 수 있는 것이다. 즉, 

 

 

* 브라우저의 동작 방식 중 paint: (배경 색, 배경 이미지,테두리, 자식, 아웃라인등을 실행)