어제 쭉 다시 찾아보면서 시도한 작업들을 이어나가는 중이다.

일단은 초기 형태로 단순하게 필요한 DB를 MySQL을 통해 구성을 해놓았고

로그인 자체의 flow는 어느 정도 구현해 놓았다.

다만 현재의 문제는..

로그인이 된 상태에서 메뉴바의 다른 탭을 통해 뷰가 전환되었다가 다시 home 탭을 눌렀을 때

로그아웃이 된 화면이 나온다는 것이다.

컴포넌트로서 로그인 창이 구현되어 있기 때문에 아마 로그인 창에서 useState 훅을 통해 로그인 상태를 관리하는 부분이 아마 컴포넌트 안에서만 유효하고 전역에선 휘발된 것 같다는 생각이다.

이를 해결하기 위한 방법을 좀 더 fancy한 방법이 있을까 찾아보아야 겠다.

조금만 검색해보아도 대부분 이렇게 흔히 사용되는 기능인 로그인 상태에 관해서

React 환경에서 컴포넌트의 상태 관리를 위한 도구는 다음과 같다.

(1) Context API

(2) Redux

(3) React Query

일단 첫 번째로

<1> Context API

컴포넌트에 대해 depth가 깊어지면 데이터를 활용하는 게 복잡해 질 수 있는데,

context를 통해 전역으로 데이터를 관리할 수 있다.

이에 대해서 context, Provide, Consumer 3가지 요소를 이해해야 한다.

Context

이 방식을 사용하기에 제일 첫 번째로 context 객체가 생성이 되어야 한다.

// context 객체 생성
const Mycontext = React.createContext(defaultValue);

Provider

provider는 데이터를 받아 context를 구독 중인 하위 컴포넌트들에게 context의 상태 변화를 전달해주는 제공자 역할을 기능한다.

<Mycontext.Provider value= {/* 데이터 */} />

Consumer

consumer는 context를 구독한 컴포넌트다. Provider로부터 전달받은 context의 상태 변화를 구독한다.

<Mycontext.Consumer>
  { /* 구독한 context 값 통해서 render */ }
</Mycontext.Consumer>

이 때,

현재 react에서 사용 권장되는 방식인 함수형 컴포넌트에서 활용할 때에는

consumer를 대신하여 useContext 훅을 사용함으로 현재 상태 구독이 가능하다.

// context를 통해 데이터 상태 변화 구독
const value = useContext(MyContext);