회원가입 및 로그인을 하면 사용자 정보를 localStorage에 저장하도록 작업해 주었습니다. 페이지를 새로고침했을 때도 로그인 상태를 유지하려면, 리액트 앱이 브라우저에서 맨 처음 렌더링될 때 localStorage에서 값을 불러와 리덕스 스토어 안에 넣도록 구현해 주어야 합니다.

이 작업은 App 컴포넌트에서 useEffect를 사용하여 처리하거나, App 컴포넌트를 클래스형 컴포넌트로 변환하여 componentDidMount 메서드를 만들고 그 안에서 처리해도 됩니다. 하지만 여기서는 프로젝트의 엔트리 파일인 index.js에서 처리해 주겠습니다.

왜냐하면, componentDidMount와 useEffect는 컴포넌트가 한 번 렌더링된 이후에 실행되기 때문입니다. 이 경우에는 사용자가 아주 짧은 깜박임 현상(로그인이 나타났다가 로그아웃이 나타나는 현상)을 경험할 수도 있습니다. index.js에서 사용자 정보를 불러오도록 처리하고 컴포넌트를 렌더링하면 이러한 깜박임 현상이 발생하지 않습니다.