Redux의 기본 개념: 3가지 원칙
1. Single source of truth
동일한 데이터는 항상 같은 곳에서 데이터를 가져온다.
데이터를 저장하는 1개뿐인 공간인 store가 존재한다.
Store
- 상태가 관리되는 오직 하나의 공간
컴포넌트 별개로 store라는 공간이 있어서, 스토어 안에 앱에서 필요한 state들을 두고
컴포넌트들에서 state 정보가 필요할 때 store에 접근을 해서 state를 가져올 수 있다.
2. State is read-only
: 리액트에서 state를 변경하기 위해서는 반드시 setState라는 메소드를 활용해야만 변화가 가능했는데
리덕스에서는 action이라는 객체를 통해서 state를 변경 할 수 있다.
Action
- JavaScrtip 객체이다.
액션은 자바스크립트 객체이고, 그 객체 안에 타입을 비롯한 다양한 데이터들이 담긴다.
액션 객체는 스토어에게 해당 애플리케이션의 데이터를 운반해주는 역할을 한다.
타입을 반드시 지정해줘야 된다.
3. Changes are made with pure functions
: 변경은 순수 함수로만 가능하다.
이것은 reducer와 연결이 되는 개념이다.
Reducer
- 현재 상태와 Action을 이용해 다음 상태를 만들어 낸다.
액션을 통해서 해당 앱의 데이터를 스토어에 운반할 수 있는데 그 과정에서 Reducer를 거쳐서 가야된다.
스토어에는 현재 state가 있을 것이고, 그 현재 상태와 액션을 통해서 새로운 New State를 만들어 낼 수 있다.
Actions 객체가 Dispatch라는 메소드에 전달되고, Dispatch는 Reducer를 호출해서 새로운 state 값을 만들어 낸다.
위의 공식을 따르는 이유는 리액트를 데이터가 한 방향으로만 흘러야되기 때문이다.
Redux의 기본 개념 Overview
- 브라우저에서
+ 버튼을 클릭하는 이벤트가 발생하면 Dispatch의 전달인자로 액션 객체를 담아서 Reducer로 전달된다.- 그러면 Reducer는 Action 객체의 type에 따라서 다른 동작을 수행하게 된다.
- 그 동작의 수행 결과로 새로운 State가 반환된다.
Redux에서 위의 개념을 Connect 할 수 있는 방법은 2가지가 있다.
map state props와 redux hooks를 사용하는 방법 2가지가 있는데 우선
redux hooks 가 더 직관적인 방법이라 이걸 알아볼 것이다.
Redux의 장점
- 상태를 예측 가능하게 만들어준다.
—> reducer는 순수 함수이기 때문에 다음 상태가 어떻게 될 지 쉽게 예측 할 수 있다.- 유지보수
—> 컴포넌트에서 App에서 props를 내려받기 위한 방식으로 작성했을 때, 버그가 나타나면 props를 내려준 모든 컴포넌트를 수정해줘야돼서 복잡하다.- 디버깅에 유리하다 (action과 state log 기록 시)
—> 하지만, Redux를 이용해서 action과 state log를 기록하면 액션이 생겼을 때 어떤 일이 일어났는지 다 추적할 수 있어서 디버깅이 유리하다.
(redux devtool을 사용해서 알 수 있다.)- 테스트를 붙이기 쉽다.
—> 순수함수를 사용하기 때문!
