문제
아래 화면과 같이 페이지를 이동할 때마다 헤더가 다시 렌더링되어 깜박임 문제가 발생합니다.
이 문제는 로그인 여부에 따라 헤더 오른쪽에 있는 구성 요소가 변경되어야 하기 때문에 발생합니다.
사용자가 홈페이지를 사용하면 보기 안좋을 것 같아서…
이 문제가 발생하면 코드를 검토해 보겠습니다.
공격적인 코드
let (loginState, setLoginState) = useState<boolean>();
const accessToken = localStorage.getItem('accessToken');
const confirmLoginState = () => {
if (accessToken === decryptAccessToken()) setLoginState(true);
}
useEffect(() => {
confirmLoginState();
}, (accessToken))이전 코드에서는 useEffect를 사용했습니다.
그러나 useEffect는 구성 요소가 먼저 렌더링되어 화면에 나타난 후에 실행됩니다.
따라서 loginState에 따라 구성 요소가 변경되면 첫 번째 렌더링 이후 변경되기 때문에 깜박이는 것처럼 보입니다.
코드 해결
let (loginState, setLoginState) = useState<boolean>();
const accessToken = localStorage.getItem('accessToken');
const confirmLoginState = () => {
if (accessToken === decryptAccessToken()) setLoginState(true);
}
useLayoutEffect(() => { // 수정
confirmLoginState();
}, (accessToken))useEffect를 useLayoutEffect로 바꾸면 문제가 해결됩니다!
useLayoutEffect는 구성 요소가 렌더링된 후 실행됩니다.
이후에 렌더링된 구성 요소가 이제 화면에 표시됩니다.
따라서 변경할 값은 이미 변경되었기 때문에 화면에 나타나기 전에 깜박이지 않습니다!
useEffect와 useLayoutEffect의 차이점이 궁금하다면?