React Redux

Redux란? 👀

리덕스는 리액트에서 가장 많이 사용되는 상태 관리 라이브러리다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있다.

Redux 기본 용어 🗣

1. 액션(Action)

상태 변화가 필요하다면 액션을 일으켜야 한다. 액션은 객체로 표현되며, type 필드를 반드시 가지고 있어야한다.

{
   type: 'ADD_TODO',
   data: {
       id: 1,
       text: '리덕스 배우기'
   }
}

  2. 액션 생성함수(Action Creator)

액션 생성 함수는 액션 객체를 만들어주는 함수다. 화살표 함수로도 표현 가능하다.

function addTodo(data) {
 return {
   type: 'ADD_TODO',
   data,
 }
}

  3. 리듀서(Reducer)

리듀서를 한국어로 해석해보면 변화를 일으키는 것을 말한다. 리듀서는 현재 상태와 액션 객체를 받아, 필요하다면 새로운 상태를 리턴하는 함수다. 액션 유형을 기반으로 이벤트를 처리하는 이벤트 리스너라고 생각하면 된다.

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가 리턴하는 값이 새로운 상태가 됩니다.

  4. 스토어(Store)

스토어에는 상태가 들어있다. 하나의 프로젝트는 하나의 스토어만 가질 수 있다.

import { createStore } from 'redux';

const store = createStore(rootReducer);

     5. 디스패치(Dispatch)

스토어 내장 함수 중 하나인 디스패치는 액션 객체를 넘겨줘서 상태를 업데이트 하는 유일한 방법이다. 이벤트 트리거라고 생각 할 수 있다.

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

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

Reducx Hooks 🐣

React에서 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()

Action 객체를 Reducer로 전달해 주는 메서드. 위에서 Dispatch를 설명할 때 사용한 dispatch 함수도 useDispatch()를 사용한 것.

import { useDispatch } from 'react-redux'

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

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

Redux의 세가지 원칙 🐣

1. Single source of truth
2. 동일한 데이터는 항상 같은 곳에서 가지고 와야 한다는 의미입니다. 이렇게 하면 애플리케이션의 디버깅이 쉬워지고 서버와의 직렬화가 될 수 있고 쉽게 클라이언트에서 데이터를 받아들여올 수 있게 된다.
3. State is read-only
4. 상태는 읽기 전용이라는 뜻으로, React에서 상태갱신함수로만 상태를 변경할 수 있었던 것처럼, Redux의 상태도 직접 변경할 수 없음을 의미합니다. 즉, Action 객체가 있어야만 상태를 변경할 수 있음과 연결되는 원칙입니다.
5. Changes are made with pure functions
   • 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
   • 파라미터 외의 값에는 의존하면 안된다.
   • 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환한다.
   • 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.
   리덕스는 언제쓰는게 좋을까? 🐥
   1. 앱의 여러 위치에서 필요한 많은 양의 상태들이 존재할 때 (전역 상태가 필요하다고 느껴질 때)
   2. 상태들이 자주 업데이트 될 때
   3. 상태를 업데이트 하는 로직이 복잡할 때
   4. 앱이 중간 또는 큰 사이즈의 코드를 갖고 있고 많은 사람들에 의해 코드가 관리될 때
   5. 상태가 업데이트되는 시점을 관찰할 필요가 있을 때
   6. 변화를 일으키는 리듀서 함수는 순수한 함수여야 한다. 순수 함수는 다음과 같은 조건을 만족한다.