-
React useEffect vs useLayoutEffect 차이점 알아보기React 2022. 12. 15. 16:29728x90
React를 사용하며 아마 가장 많이 사용하는 Hook을 말하라면 무조건 순위권 안에 들 Hook은 useEffect일 것입니다.
하지만 아래의 Flow 그림에서 보면 useEffect 이외에 useLayoutEffect라는 hook이 있다는 것을 알 수 있습니다.
둘의 차이는 간단하게 설명 가능합니다.
Dom이 화면을 그린 뒤 호출되는 것이 useEffect 화면을 그리기 전에 호출되는 것이 useLayoutEffect입니다.
이렇게 말하면 와닿지 않을 수 있을 수 있겠지만 React내에서의 깜빡임 문제를 해소하려고 검색할 경우 가장 많이 나오는 것이 useLayoutEffect입니다.
아래의 코드를 살펴봅시다.
import React, { useEffect, useState } from 'react'; const Test: React.FC = () => { const [name, setName] = useState(''); const [age, setAge] = useState(0); useEffect(() => { setName('김철수'); setAge(33); }, []); return ( <div style={{ fontSize: '24rem' }}> 안녕! 내 이름은 {name}이고, 나이는 {age}살이야! </div> ); }; export default Test;
위와 같은 상황은 자주 발생하고 이 상황에서는 순간적이긴 하지만 이름은 빈 문자열이, 나이는 0이 보였다가 변경됩니다.
그에 반해 useLayoutEffects는 Dom 화면을 그리기 전에 동기적으로 실행하기 때문에 이런 문제에서 자유롭습니다.
import React, { useLayoutEffect, useState } from 'react'; const Test: React.FC = () => { const [name, setName] = useState(''); const [age, setAge] = useState(0); useLayoutEffect(() => { setName('김철수'); setAge(33); }, []); return ( <div style={{ fontSize: '24rem', margin: 80 }}> 안녕! 내 이름은 {name}이고, 나이는 {age}살이야! </div> ); }; export default Test;
이렇게 새로고침을 했을 때 깜빡이는 증상이 없어졌습니다.
다만 useLayoutEffect 역시 Serverside가 아닌 Cliendside이기 때문에 그 부분을 유의해 사용해야 되며, Serverside의 단점과 동일하게 로직의 복잡도가 너무 높다면 Dom을 그리는데 너무 긴 시간이 걸리는 단점도 존재합니다.
그러니 기본적으로는 항상 useEffect를 사용하고 사용자 경험을 망치는 특정 상황에서만 간단하게 사용하기를 권장합니다.
'React' 카테고리의 다른 글
고급 React Hooks 사용을 위한 팁과 요령 (0) 2024.02.05 useState와 useEffect를 넘어선 고급 React Hooks (0) 2024.01.29 Stylelint를 이용해 css 정리하기 (feat. Styled-Components) (0) 2022.11.14 React 디자인패턴 (0) 2022.10.07 React 최신 상태관리 라이브러리 비교하기 (feat. zustand, redux-toolkit, jotai, recoil) (2) 2022.08.16