[React] 상태 관리-2

Chapter2. Redux
1.상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.
2.Redux에서 사용하는 Action, Dispatcher, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.
3.Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.

 

1 Redux는 React에서 겪을 수 있는 상태관리의 어려움을 개선하기 위해 만들어졌다.

 

2.Redux의 진행 순서는 UI(버튼클릭) -> Action (Dispatch로 전송)-> Reducer -> Store -> State -> UI 같은 순환 방식을 가지고 있다.

Action - 이름처럼 어떤 액션을 취할지 정의된 객체로 { type : 'action' , payload : num}과 같은 형식이며 payload는 없어도 상관없다. 
아래와 같은 방식으로 기능 또는 기능+payload를 포함한 액션 생성자를 만들어 사용한다.

const increase = () => {
  return {
    type: 'INCREASE'
  }
}

const setNumber = (num) => {
  return {
    type: 'SET_NUMBER',
    payload: num
  }
}

Dispatch - 디스패치 또한 이름처럼 보내는 기능을 수행하는 함수로 Action을 Reducer로 전달한다. 

  dispatch( { type: 'INCREASE' } )
  dispatch( increase() );
  dispatch( { type: 'SET_NUMBER', payload: 5 } );
  dispatch( setNumber(5) );

Reducer - 리듀서는 디스패치에서 받은 액션을 수행하는 함수로 내부에 스위치를 통해 액션에 따라 분기하는 조건문을 가지고 있으며 순수함수여야 한다는 조건을 가지고 있다.

const count = 1
const counterReducer = (state = count, action) {
  switch (action.type)
    case 'INCREASE': return state + 1
    case 'DECREASE': return state - 1
    case 'SET_NUMBER': return action.payload
    default : return state;
}

Store - 스토어 또한 이름처럼 저장소의 역할을 한다.

import { createStore } from 'redux';
const store = createStore(rootReducer);

Redux Hooks
Redux Hooks에는 대표적으로 useSelector와 useDispatch가 있다.

useSelector는 컴포넌트와 state를 연결해준다.

import { useSelector } from 'react-redux'
const counter = useSelector(state => state.counterReducer)

useDispatch는  Action 객체를 Reducer로 전달해 주는 메서드로 dispatch도 useDispatch를 사용한 것이다.

import { useDispatch } from 'react-redux'
const dispatch = useDispatch()
dispatch( increase() )
dispatch( setNumber(5) )

3.Redux에는 Single source of truth, State is read-only, Changes are made with pure functions라는 세 가지 원칙이 있다.

Single source of truth - 동일 데이터는 항상 같은 곳에서 가져와야 한다는 의미로 '같은 곳'은 Store를 의미한다.
 
State is read-only - state는 read-only 즉 상태는 Action 객채로만 변경할 수 있음을 의미한다.

Changes are made with pure functions - 변화는 순수함수로만 가능하다는 의미로 Reducer는 순수함수만 사용하라는 의미이다.