개발자 퉁이리

FLUX FLUX는 FaceBook에서 고안한 단반향 데이터 흐름의 디자인 패턴이다. FLUX 패턴은 REACT Redux의 디자인 패턴으로 사용되고 있다. MVC 모델을 사용하고 있던 FaceBook에서 데이터가 많아지고, 복잡해지자 예상치 못한 오류들을 FaceBook에게 안겨주었다. 위 그림처럼 복잡해졌고, FaceBook은 이를 해결하기 위해 FLUX 패턴을 고안해낸다. FLUX 패턴 FLUX 패턴은 데이터를 보다 명확하게 구분하기 위해, MVC 복잡성을 해결하기 위해 데이터의 방향이 한쪽으로만 이동한다. FLUX 요소 Action Dispatcher Store View 🔥 Action Action은 데이터 상태 변경을 도와준다. Action 생성자는 type과 payload를 묶어 Dispatc..

Redux-Persist React의 Redux-Persist를 사용하면 새로고침을 해도 데이터가 지속적으로 유지된다. 이 글에선 Redux-Persist를 Redux-Toolkit과 함께 사용하여 알아볼 예정이다. 먼저 프로젝트를 설치하자 CRA 설치 # Redux + Plain JS template npx create-react-app my-app --template redux 기존 # NPM npm install @reduxjs/toolkit # Yarn yarn add @reduxjs/toolkit 파일 구조 ├── README.md ├── node_modules ├── package.json ├── public └── src 새로고침을 해도 데이터를 유지하는 것을 적용하기 전에 먼저 현재 상태를..