사이드 프로젝트 11편 | 헤더 (라우터, 웹 브라우저 캐싱, redux, localStorage)

• 현재 상황 :
  • Redux 사용해서 user reducer 생성해서 전역에서 사용 중 => 더미 데이터로 테스트
  • 헤더에서 로그인 여부에 따라 UI 다르게 보여주는 기능 구현 
• 다음 과제 :
  • user api 연동
  •  

 

어려웠던 점

로그인 유지하기 (리렌더링의 잘못된 이해, Redux)

1. 목표 : 로그인 성공하면 메인페이지로 이동 후 헤더 UI 바꾸기
2. 상황 : 
   • /login에서 메인페이지로 이동했음에도 불구하고 메인페이지에 있는 헤더가 로그인 상태를 반영 안 함 
3. 분석
   1. 메인페이지가 리렌더링이 되고 있는지 확인
      1. 먼저 로그인이 성공하면 localStorage에 user를 저장해 둔다.
      2. 메인페이지가 리렌더링 되면 다시 마운트 될 것이므로 useEffect()를 적어두어 마운트시 해당 코드가 실행되는지 확인한다. => 실행이 안됨
4. 배운 점
   1. 페이지 이동의 잘못된 이해
      1. 페이지를 react-router를 통해서 이동하면 당연하게 해당 컴포넌트가 화면에 보이게 되는 것이니 리렌더링이 되고 있는 것이라 생각하고 있었다.
   2. React의 불필요한 렌더링 방지 및 성능 최적화
      1. 이전 페이지의 상태가 변하지 않았다면 새로운 페이지로 이동해도 해당 페이지의 컴포넌트가 다시 렌더링 되지 않는다. React에서는 상태나 속성(props)의 변화가 없는 경우에는 재렌더링을 수행하지 않는다.
      2. 즉, 이전 페이지의 상태가 변한 것이 아니라면, 새로운 페이지로 이동할 때 React는 해당 페이지에 대한 새로운 컴포넌트를 렌더링 하지 않는다.
   3. 웹 브라우저 페이지 캐싱과 React의 렌더링 메커니즘
      1. 이전 페이지를 리렌더링 하지 않는다면 어떻게 이전 페이지를 저장하고 다시 보여준다는 거지? 
      2. 웹 브라우저는 방문한 페이지의 상태를 캐싱하여 이전 페이지로의 이동 시에 더 빠르게 페이지를 로드할 수 있도록 도와준다. 이전 페이지의 상태가 변하지 않은 경우 웹 브라우저는 해당 페이지를 캐싱하고, 이전 페이지로 이동할 때 캐시된 페이지를 다시 렌더링 하여 보여준다.
      3. React 자체는 이전 페이지를 캐싱하거나 저장하지 않는다. 이전 페이지를 저장하고 다시 렌더링 하는 것은 브라우저의 캐싱 메커니즘의 역할이다. React는 브라우저의 내장 기능을 활용하여 페이지 간 이동과 이전 페이지의 캐싱을 관리한다. 
      4. 웹 브라우저의 페이지 캐싱과 React의 렌더링 메커니즘이 함께 동작하여 페이지 간의 전환 및 상태 변화에 대응하여 최적의 사용자 경험을 제공한다.
5. 해결법
   1. 헤더에서 useEffect 함수를 통해서 마운트 시 localStorage의 값을 읽어와 로그인 여부를  UI에 반영하려고 했으나, 리렌더링이 안되니 마운트 할 때 localStorage 값을 읽어오는 방법은 쓸 수 없게 되었다.
   2. 헤더가 리렌더링이 되려면 헤더 컴포넌트의 상태가 변해야 한다.
      1. 상태를 변경시키는 업데이트 콜백 함수를 로그인페이지에서 헤더까지? 엄청난 props drilling이 발생될 것 같다.
      2. props drilling이 발생한다.. 상태관리를 해보자
   3. Redux를 사용한다.
      1. 전역 상태를 생성하고 상태가 업데이트될 경우 해당 상태를 구독하고 있는 컴포넌트를 리렌더링 시킨다.
      2. user reducer를 만들고 헤더 컴포넌트에서 user 구독하게 만든다. 로그인 시 user 상태를 변경하여 헤더 컴포넌트의 리렌더링이 발생되게 만든다.

헤더컨테이너 컴포넌트에서 user값과 dispatch함수를 Header 컴포넌트에게 props로 내려주었습니다. user 상태가 변경되면 NavBar 컴포넌트도 리렌더링 될테니 React.Memo로 감싸주어야 겠네요

 

1. • 조건부 렌더링으로 user 값에 따라 컴포넌트를 동적으로 보여줍니다.

 

결과!! 

 

Redux는 이번 편에서 사용하게 된 이유에 대해서만 간단하게 언급했습니다. api연동 작업하면서 비동기 처리 할 때 한번 더 작성해 보도록 하겠습니다.