Redux

Disney Plus 를 가볍게 클론코딩한 프로젝트로 Firebase를 통한 인증을 연습하는데 도움이 된 프로젝트였다. 사용자 인증을 통해 받아온 데이터를 로컬 스토리지에 저장하고 가져오도록 설정되어 있었는데 이번에 해당 데이터를 Redux를 이용해서 관리하도록 수정해보기로 했다. 이때 문제가 발생했다. Redux는 새로고침이 발생하면 저장된 state가 리셋되는 문제가 있었다. 로그인 정보를 관리하는 경우 state가 유지되어야할 필요성이 있었다. 이럴 때 redux-persist를 활용하면 문제를 해결할 수 있다. 사용 방법 1 )Install npm i redux-persist yarn add redux-persist TypeScript npm i redux-persist @types/redux-p..

유용하고 강력한 상태 관리 라이브러리임에도 불구하고 힘들여 배워 놓고 사실상 한번도 사용해 보지 못했다. Redux는 자바스크립트 상태 관리 라이브러리로 다양한 데이터를 한곳에서 관리하고 여러 컴포넌트가 이를 구독함으로서 동작한다. 컴포넌트간 프롭으로 데이터를 전달하는 것과 달리 Redux에서는 데이터가 한방향으로 흐르게 되어 있다. Redux의 세가지 원칙 1. Single source of truth 데이터는 Store에서 가져오며 스토어는 하나만 존재할 수 있다. 즉 데이터는 한곳에서 관리된다는 의미이다. 2. State is read-only 데이터는 읽는 것만 가능하며 변경을 위해서는 액션 객체를 이용해서 변경하는 것이 가능하다. 3. Changes are made with pure functi..