[React] 페이지 접근제어 기능 보완하기 (feat. useLayoutEffect)

현수·2023년 12월 10일

React

전문 요약

페이지 접근제어를 구현할때 useEffect 대신 useLayoutEffect를 사용하면 화면이 깜박이는 현상을 해결할 수 있다.

useEffect는 브라우저에 Paint 된후, useLayoutEffect는 Paint 이전에 동작한다.

글을 쓰게된 배경

이전 프로젝트에서 유저 권한별로 접근할 수 있는 페이지와 접근하면 안되는 페이지를 분리하는 기능이 필요했다.

즉 한마디로 권한별 페이지 접근제어 기능인데 이를 isLoggedIn 이라는 상태와 useEffect를 이용하여 구현하였다.

권한이 필요한 페이지에 처음 접근하면 useEffect에서 isLoggedIn 상태를 체크하여 권한이 있으면 페이지를 보여주고 권한이 없으면 login 페이지로 리다이렉션하게 하였다.

// 권한이 필요한 페이지 컴포넌트
  const {isLoggedIn} = useAuthStore();  // zustand 상태저장소

  useEffect(() => {
    if(!isLoggedIn) {
      navigate('/login')
    }
  }, [isLoggedIn]);

// ...이하 생략

문제점

그러나 이코드는 문제가 있었는데 권한이 없을때 페이지에 접속하면 로그인 페이지로 리다이렉션이 정상적으로 되었으나 이동전 찰나의 순간에 잠깐 이동하려는 페이지의 화면이 보여지는 것이였다.

만약 권한이 필요한 페이지에 중요한 정보가 있다면 이는 큰 취약점이 될수도 있는 문제였다.

(문제를 구현한 Demo - 권한이 필요한 페이지에 지속적으로 접근했을경우 발생하는 화면)

페이지가 화면에 보여지기전에 권한 체크 로직이 실행되고 이후에 페이지 렌더링이 실행되는 방향으로 수정할 수 있다면 해결될 것 같았지만 그당시에는 구체적으로 해결법을 찾지 못했다.

해결

해당 문제를 잊고있다가 테오의 프론트엔드 오픈채팅방을 통해 useLayoutEffect Hook을 알게되었다. 해당 hook은 페이지 렌더링 이전에 로직이 실행된다는 것이었다. 나는 해당 내용을 보고 Demo 페이지를 구성하고 테스트 해보았고 정말로 페이지 노출 증상이 해결되었다.

// 권한이 필요한 페이지 컴포넌트
  const {isLoggedIn} = useAuthStore();  // zustand 상태저장소

  useLayoutEffect(() => {  // useLayoutEffect로 변경
    if(!isLoggedIn) {
      navigate('/login')
    }
  }, [isLoggedIn]);

// ...이하 생략