01.Redux의 구조
Redux는 컴포넌트와 상태를 분리한다.
Redux에선 'Action → Dispatch → Reducer → store' 순서로 데이터가 단반향으로 흐른다.
1 상태가 변경되야하는 이벤트 발생 시 → 변경될 상태 정보가 담긴 'Action' 객체를 생성한다.
2 Action 객체는 Dispatch함수의 인자로 전달된다.
3 Dispatch함수는 -Action 객체를→ Reducer 함수로 전달한다.
4 Reducer 함수는 Action 객체의 값을 확인하고 → 전역 상태 저장소인 Store의 상태를 변경한다.
5 상태가 변경되면 React는 화면을 다시 렌더링한다.
1. Store
Store는 상태가 관리되는 오직 하나뿐인 저장소의 역할을 하며, Redux 앱의 state가 저장되어 있는 공간이다.
createStore메서드를 활용해 Reducer를 연결해서 Store를 생성할 수 있다
2. Reducer
Reducer는 Dispatch에게서 전달받은 -Action 객체의 type 값에 따라→ 상태를 변경시키는 함수이다.
Reducer는 순수함수여야 한다 → 외부 요인에 의해 기대값이 아닌 엉뚱한 값으로 변경되지 않아야 하기 떄문이다.
3. Action
말 그대로 어떤 액션을 취할 것인지 정의해 놓은 객체로, 아래 형식으로 구성된다.
type
해당 Action이 어떤 동작을 하는지 명시하는 역할이며, type은 필수로 지정해주어야 한다.
대문자와 Snake Case로 작성한다.
필요에 따라 payload를 작성해 구체적인 값을 전달한다.
액션 생성자(Action Creator)
보통은 Action을 직접 작성하지 않고 → Action 객체를 생성하는 함수를 만들어 사용하는데, 이 함수가 바로 액션 생성자(Action Creator)이다.
4. Dispatch
Dispatch는 Reducer로 Action을 전달해주는 함수로, Dispatch의 전달인자로 Action 객체가 전달된다.
3. Redux Hooks
Redux Hooks는 React-Redux에서 Redux를 사용할 때 활용할 수 있는 Hooks 메서드를 제공하고, useSelector(), useDispatch()메소드가 대표적이다.
1. useDispatch()
useDispatch()는 Action 객체를 Reducer로 전달해 주는 Dispatch 함수를 반환하는 메서드이다.
위에서 Dispatch를 설명할 때 사용한 dispatch 함수도 useDispatch()를 사용해서 만든 것이다.
2. useSelector()
useSelector()는 컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있게 해주는 메서드이다.
Redux의 세 가지 원칙
- Single source of truth
동일한 데이터는 항상 같은 곳에서 가지고 와야한다.
→ Redux에선 데이터를 저장하는 단 하나뿐인 공간인 Store가 있다.
- State is read-only
상태는 읽기 전용으로, Redux의 상태는 직접 변경할 수 없다(React에서 상태갱신함수로만 상태를 변경할 수 있었던 것과 같은 이치)
Redux에선 Action객체가 있어아만 상태를 변경할 수 있다.
- Changes are made with pure functions
상태가 엉뚱한 값으로 변경되지 않도록 변경은 순수함수로만 가능하다.
Reducer와 연결되는 원칙이다.
