[💻 코드스테이츠 FE 44기]Redux

✔️ 시작

Redux의 흐름을 배우면서 페어분과 함께 과제를 진행했다.

---

📍 배운 것

✔️ Redux

• 상태 관리 라이브러리
• 전역 상태를 관리할 수 있는 저장소 Store를 제공해 문제를 해결한다.
• React 말고도 JavaScript 등 어느 문법에서도 사용 가능하다.

✔️ Redux 구조

Action(객체) → Dispatch(함수) → Reducer(함수) → Store(저장소)
데이터가 단방향으로 흐른다.

1. 상태가 변경되어야 하는 이벤트 발생 시 변경될 상태에 대한 정보가 담긴 Action 객체가 생성
2. Action 객체 => Dispatch 함수 인자로 전달
3. Dispatch 함수 => Action 객체를 Reducer 함수로 전달
4. Reducer 함수 => Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태 변경
5. 상태가 변경되면, React는 화면을 다시 렌더링

💻 Store

• 상태가 관리되는 오직 하나 뿐인 저장소의 역할
• Redux 앱의 state가 저장되어 있는 공간
• createStore 메서드를 이용해 Reducer 연결 후 Store 생성할 수 있다.

//createStore 불러오기
import {createStore} from 'redux'; 
// createStore메서드 이용해 store 생성
// 인자는 reducer 함수를 넣어준다.
const store = createStore(rootReducer)

💻 Reducer

• Dispatch에게서 전달 받은 Action 객체의 type값에 따라 상태를 변경시키는 함수
• Reducer는 순수함수여야 한다. (외부 요인으로 인해 기대한 값이 아닌 엉뚱한 값으로 상태가 변경되는 일이 없어야하기 때문)
  - 첫번째 인자 : 기존 state가 들어온다.
  (default value를 꼭 설정해 주어야한다. 그렇지 않을 경우 undefined가 할당 되기 때문)
  - 두번째 인자 : action 객체
• action 객체에서 정의한 type에 따라 새로운 state를 리턴
• 새로운 state는 전역 변수 저장소 Store에 저장된다.

// 기본 문법
const reducer = () => {}
// store 인자는 reducer 
const store = createStore(reducer)
.
.
.
const count = 1

// Reducer를 생성할 때에는 초기 상태를 인자로 요구한다.
// state = count = 1
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;
	}
}

// store 인자는 reducer 
const store = createStore(counterReducer)

• Reducer를 생성할 때에는 초기 상태를 인자로 요구한다.
• Action 객체의 type 값에 따라 분기하는 switch 조건문을 사용한다. (if문 사용해도 가능 한 듯)
• Reducer가 리턴하는 값이 새로운 상태가 된다.

❗️여러 개의 Reducer를 사용하는 경우

combineReducers메서드를 사용해 하나의 Reducer로 합쳐줄 수 있다.

// combineReducers 불러오기
import { combineReducers } from 'redux';
// combineReducers 사용하기
const rootReducer = combineReducers({
  	//Reducer 함수 추가해 주기
	counterReducer,
  	anyReducer,
  	...
})

💻 Action

• 어떤 액션을 취할 것인지 정의해 놓은 객체이다. (어떻게 state를 변경할지 정의해 둔 객체)
• type은 필수로 지정해 주어야 한다.
  - Action 객체가 어떤 동작을 하는지 명시해 주는 역할
  - 지정한 type에 따라 Reducer 함수에서 새로운 state를 리턴하게 된다.
• 대문자, Snake Case로 작성
• Action 객체는 Dispatch 함수를 통해 Reducer 함수 두번째 인자로 전달된다.
• 필요에 따라 payload를 작성해 구체적인 값을 전달한다.

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

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

❗️ 액션 생성자(Action Creator) : Action은 직접 작성하기 보단 Action 객체를 생성하는 함수를 만들어 사용하는 경우가 많다.

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

💻 Dispatch

• Reducer로 Action을 전달해 주는 함수
• Dispatch의 전달인자로 Action 객체가 전달된다.
• Action 객체를 전달 받은 Dispatch함수는 Reducer를 호출한다.

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

// 액션 생성자(Action Creator)를 사용하는 경우
// export를 붙여주면 다른 파일에서 사용이 가능하다.
export const increase = () => {
  return {
    type: 'INCREASE'
  }
}
export const setNumber = (num) => {
  return {
    type: 'SET_NUMBER',
    payload: num
  }
}
dispatch( increase() );
dispatch( setNumber(5) );

📍 Redux Hook

• React-Redux에서 Redux를 사용할 때 활용할 수 있는 Hook 메서드를 제공
• useDispatch(), useSelector() 메서드를 기억하면 좋다.

💻 useDispatch()

• Action 객체를 Reducer로 전달해 주는 Dispatch 함수를 반환하는 메서드
• dispatch 함수는 이벤트 핸들러 안에서 사용된다.

// Redux Hooks 메서드는 'redux'가 아니라 'react-redux'에서 불러온다.
// useDispatch 불러오기
import { useDispatch } from 'react-redux';
// 외부 파일에서 작업 한 increase,decrease 불러오기
import { increase,decrease } from './index.js';

const dispatch = useDispatch()
dispatch( increase() )
dispatch( setNumber(5) )

💻 useSelector()

• 컴포넌트와 state를 연결해 Redux의 state에 접근할 수 있게 해주는 메서드
• state가 필요한 컴포넌트에서 전역 변수 정장소 store에 저장된 state를 쉽게 불러올 수 있다.

// Redux Hooks 메서드는 'redux'가 아니라 'react-redux'에서 불러온다.
// useSelector 불러오기
import { useSelector } from 'react-redux

const counter = useSelector(state => state)

📍 Redux의 세가지 원칙

1. Single source of truth

• 동일한 데이터는 항상 같은 곳에서 가지고 와야한다.
• Redux에는 데이터를 저장하는 Store (단 하나뿐이 공간)

2. State is read-only

• 상태는 읽기 전용
• Redux의 상태도 직접 변경할 수 없다.
• Action 객체가 있어야 상태를 변경할 수 있다.

3. Changes are made with pure functions

• 변경은 순수함수로만 가능하다.
• 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수함수로 작성되어야한다. (Reducer)

---

✏️ 마치며

Redux의 흐름을 이해하면서 이번 과제를 진행했다.
약간 추상적인 개념이 많아서 헷갈리는 부분이 있기도 했다.

글로 보고 이해하기 보다는 과제를 풀어보면서
작성하고 어떻게 흐름이 진행되는지 확인 하니
이해하는데 도움이 된 거 같다.

이번 페어분이 너무 잘 하시기도 하고
코드스테이츠가 의도한 과제 주제를 잘 파악해 주셔서
과제 이후 진행되는 자습 시간에 학습 방향을 잘 잡을 수 있었던 거 같다.

React, Redux의 상태를 어떻게 관리하는지
그림을 그리면서 진행을 해야 도움 된다.