[React] useEffect vs useLayoutEffect
useEffect
hook만 사용하다 useLayoutEffect
hook을 알게되어 차이점을 기록하려한다.
두 hook은 화면이 렌더링될 때 실행된다는 점에서는 동일하다. 그러나 약간의 차이점이 존재한다.
1) useEffect
화면이 레이아웃과 배치가 끝난 이후 실행된다.
아래의 코드를 살펴보자
function app() {
const [count, setCount] = useState(0);
useEffect(() => {
setCount(25);
},[]);
return(
<div>{count}</div>
)
}
위의 코드는 화면이 렌더링 될때 count state
를 25로 변경해준 후 렌더링 할 것이다. 그러나 화면을 새로고침을 해보면 표시되는 count가 initialState
값인 0이었다가 아주 빠르게 25로 변경되는 것을 알 수 있다.
-> 화면이 렌더링 될 때 먼저 count state
를 initialState
로 레이아웃배치와 그리기를 완료한 후 그제서야 state
를 우리가 설정한 25로 변경해줌을 알 수 있다.
그렇다면 useLayoutEffect는 어떻게 동작할까?
2)useLayoutEffect
화면이 레이아웃배치와 그리기전에 먼저 실행된다.
다음 코드를 살펴보자
function app() {
const [count, setCount] = useState(0);
useLayoutEffect(() => {
setCount(25);
},[]);
return(
<div>{count}</div>
)
}
보면 useEffect
를 사용했을 때와 별반 차이가 없어 보인다. 그러나 useLayoutEffect
를 사용하면 useEffect
를 사용했을 때와 달리 count state
가 initialState
가 아닌 setCount
로 설정한 값으로 처음부터 렌더링 되는 점을 알 수 있다.
따라서, 화면이 렌더링될때 상태값에 의존을 많이 하고 있다면 useEffect
를 사용하는 것보다 useLayoutEffect
를 사용하는 것이 원하는 결과를 얻을 수 있을 것이다.
Author And Source
이 문제에 관하여([React] useEffect vs useLayoutEffect), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@growing_dev/React-useEffect-vs-useLayoutEffect저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)