상태 관리(Redux)

상태 관리

• React는 상태 관리를 위한 라이브러리는 아니다.
• 상태란 변하는 데이터, UI, 동적으로 표현되는 데이터
• 로컬 상태 - 특정 컴포넌트 안에서만 관리되는 상태 다른 컴포넌트와 데이터를 공유하지 않음
• 전역 상태 - 프로덕트 전체 혹은 여러 가지 컴포넌트가 동시에 관리하는 상태 (다크 모드,라이트 모드, 언어 설정)
• 서로 다른 컴포넌트가 동일한 상태를 다루면 출처는 오직 한 곳이어야 한다. (하나의 출처)
• 상태 관리 툴로는 React Context, Redux, MobX, Recoil 등이 있다.
• 상태 관리 툴은 전역 상태 저장소를 제공하고, props driling(필요치 않은 곳에 props 내려줘야하는) 이슈를 해결 해준다.

Redux

• React에서는 상태와 속성을 이용한 컴포넌트 단위 개발 아키텍처라면 Redux에서는 컴포넌트와 상태를 분리하는 패턴이다.
• Redux는 React 없이도 사용할 수 있는 상태 관리 라이브러리다.
• 동일한 데이터는 항상 같은 곳에서 가지고 와야한다. Stroe는 단 하나 뿐이다.
• 상태는 읽기 전용으로 Redux의 상태는 직접 변경할 수 없고 Action 객체가 있어야만 상태를 변경할 수 있다.
• 변경은 순수함수로만 가능하다.

기본 React의 데이터 흐름

 

Redux의 데이터 흐름

 

Redux의 상태 변경 순서

1. Action 객체 : 상태가 변경되어야 하는 이벤트가 발생하면 변경될 상태에 대한 정보가 담김
2. Dispatch 합수 : Action은 Dispatch의 인자가 된다.
3. Reducer 함수 : Dispatch를 통해 Action이 Reducer로 옮겨짐.
4. Store : Reducer 함수에서 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경한다.

 

Action - 어떤 액션을 취할 것인지 정의 해놓은 객체

// payload가 필요 없는 경우
{ type: 'INCREASE' }

// payload가 필요한 경우
{ type: 'SET_NUMBER', payload: 5 }

//type은 필수로 지정해야함(어떻게 동작할지 명시해주는 역할)

 

// payload가 필요 없는 경우
const increase = () => {
  return {
    type: 'INCREASE'
  }
}

// payload가 필요한 경우
const setNumber = (num) => {
  return {
    type: 'SET_NUMBER',
    payload: num
  }
}
//직접 작성하는 것보다 보통 함수를 만들어 사용한다.

 

Dispatch - Reducer로 Action을 전달해주는 함수

// Action 객체를 직접 작성하는 경우
dispatch( { type: 'INCREASE' } );
dispatch( { type: 'SET_NUMBER', payload: 5 } );

// 액션 생성자(Action Creator)를 사용하는 경우
dispatch( increase() );
dispatch( setNumber(5) );

 

Reducer - Action 객체의 type 값에 따라 상태를 변경시키는 함수

const count = 1

// Reducer를 생성할 때에는 초기 상태를 인자로 요구한다.
const counterReducer = (state = count, action) {

  // Action 객체의 type 값에 따라 분기하는 switch 조건문.
  switch (action.type)

    //action === 'INCREASE'일 경우
    case 'INCREASE':
			return state + 1

    // action === 'DECREASE'일 경우
    case 'DECREASE':
			return state - 1

    // action === 'SET_NUMBER'일 경우
    case 'SET_NUMBER':
			return action.payload

    // 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴
    default:
      return state;
}
// Reducer가 리턴하는 값이 새로운 상태가 된다.

• 외부 요인으로 인해 엉뚱한 값으로 상태가 변경되는 일이 없어야하기 때문에 순수함수여야한다.
• 여거 개의 Reduver를 사용하는 경우, Redux의 combineReducers 메서드를 사용해 하나의 Reducer로 합칠 수 있다.

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  counterReducer,
  anyReducer,
  ...
});

 

Store - 상태가 관리되는 오직 하나뿐인 저장소

import { createStore } from 'redux';

const store = createStore(rootReducer);

 

Redux Hooks

 

- useSelector() 

• 컴포넌트와 state를 연결해 Redux의 state에 접근할 수 있게 해주는 메서드

// Redux Hooks 메서드는 'redux'가 아니라 'react-redux'에서 불러온다.
import { useSelector } from 'react-redux'
const counter = useSelector(state => state.counterReducer)
console.log(counter) // 1

 

- useDispatch()

• Reducer로 전달해주는 메서드 위에서 말한 Dipsatch가 이걸 설명한 것

import { useDispatch } from 'react-redux'

const dispatch = useDispatch()
dispatch( increase() )
console.log(counter) // 2

dispatch( setNumber(5) )
console.log(counter) // 5