초기값에 의해 발생하는 사이드 이펙트 (FOUC, FOMC)

서론

사이드프로젝트를 진행하던 중, 회원의 로그인 상태를 관리하는 contextAPI를 만들었다.

 

로그인을 하게 되면, 기본값으로 설정했던 false 에서 로그인을 하게되면 true 변경되는 것이다.

 

그런데 나는 혹시 회원의 실수로 페이지가 새로고침이 되거나, 어떠한 이유로 페이지가 새로 마운트 될 때, 로그인 상태가 기본값으로 바뀌는것을 방지하기 위해, localStorage에 회원의 로그인 상태를 보관했다.

 

사실 이것만 보관한다면 그냥 필요한곳에서 로컬스토리지의 값을 확인해서 로그인 상태를 확인하면 되지만, 나는 다른 회원정보나 필요한 정보를 같이 보내주는 contextAPI를 설계해서 보내주게 되었다.

 

문제

문제는 여기서 발생한다. 만약 회원이 새로고침이 되면, context도 새로 마운트 되기 때문에 로그인상태가 초기값인 false를 잠시 가지고 있다가, useEffect가 실행되면서 로컬스토리지를 탐색하고 로그인 상태를 true로 만들어 주게 된다.

 

이렇게 되면, 잠시 초기값이 false가 되는 순간이 존재하기 때문에 로그인 상태를 의존하는 컴포넌트들은 사이드이펙트를 발생시키게 된다.

 

초기값이 잠시 보이는 문제를 일반적으로 Flash of Unstyled Content (FOUC) 혹은 Flash of Missing Content (FOMC)라고 부르는 현상과 매우 비슷한 원리였다.

 

따라서 초기값이 아닌 계산된 값이 들어가기 위해 로딩 상태를 적용하는 방법과, useState의 초기화 함수를 사용하는 Lazy Initialization 방법을 통해 해결해야 했다.

 

해결

나는 Lazy Initialization 방법을 사용했다.

const [isLogin, setIsLogin] = useState(() => {
  return !!localStorage.user;
});

useState의 초기값을 설정하는 함수는 동기적으로 실행된다. 따라서 초기값을 설정하는 데 시간이 많이 걸리는 무거운 연산이 들어간다면 해당 컴포넌트의 렌더링이 완료되기 전에 해당 연산을 기다린 후 렌더링 하게 된다. 따라서 무거운 연산을 해야한다면 더 좋은 해결 방법이 없는지 고려해봐야 할 것이다.

 

 

고찰

사실 아예 다른 방법으로 해결할 수 있었을지도 모른다. 아직 큰 아이디어가 떠오르지 않고, 지금 당장은 이렇게도 문제가 해결되고 내가 의도한 동작이 되어 다행이라고 생각하지만, 뭔가 마음 한켠에 개발의 고수들은 어떻게 해결할까? 하는 궁금증이 너무 크게 남아있다.