[React] 컴포넌트 깜빡임 문제

💛 문제점

아래 화면처럼 페이지를 이동할 때마다 header가 다시 렌더링되면서 깜빡이는 문제가 발생합니다.

로그인 여부에 따라서 헤더의 오른쪽 컴포넌트가 바뀌어야하기 때문에 생기는 문제입니다.

사용자가 홈페이지를 이용할 때 보기 안좋을 것 같군요...ㅠㅠ

 

컴포넌트 깜빡임 문제

---

이 문제가 발생했을 때의 코드를 확인해보겠습니다.

🤔 문제가 발생한 코드

  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의 차이가 궁금하시다면?👈

[React] useEffect VS useLayoutEffect 비교