S3) Unit 4. [React] 상태 관리

📣  전역 상태 관리

✔️ 상태 : UI 에 동적으로 표현될 데이터

➰ 상태를 다룰 때는 Side Effect 를 고려해야 한다!

➰ Side Effect : 함수 또는 컴포넌트의 입력 외에도 함수의 결과에 영향을 미치는 요인

    - 네트워크 요청 (백엔드 API 요청)

 

✔️ 로컬 상태 : 특정 컴포넌트 안에서만 관리되는 상태

➰ 다른 컴포넌트와 데이터를 공유하지 않는 폼 데이터는 대부분 로컬 상태이다.

➰ input box, select box 등과 같이 입력값을 받는 경우

 

✔️ 전역 상태 : 프로덕트 전체 또는 여러 컴포넌트에서 관리되는 상태

➰ 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 이 출처는 오직 한 곳이어야 한다.

➰ 이 출처가 '전역 공간' 이 된다.

➰ 테마 설정, 국제화 설정 등이 전역 상태의 대표적인 예시이다.

🚨 데이터 무결성을 위해, 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 오도록 하자!!

🚨 Single source of truth 원칙은 프론트엔드 뿐만 아니라 다양한 곳에서 언급되는 원칙

 

✔️ 상태 라이브러리가 해결해주는 문제점

➰ 전역 상태를 위한 저장소를 제공한다.

➰ props drilling 문제를 해결한다.

➕ props drilling

➰ 중간에 존재하는 컴포넌트들은 굳이 필요한 state가 아님에도, 아래 컴포넌트에 전달해주기 위해서 state를 전달받아야 하는 것

---

📣  Props Drilling 의 문제점

✔️ 규모가 커지고, 구조가 복잡해지면서 props의 전달 과정이 늘어난다면 문제가 발생한다.

➰ 코드의 가독성이 매우 나빠진다.

➰ 코드의 유지보수 또한 힘들어지게 된다.

➰ state 변경시 Props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생한다 -> 웹성능에 악영향을 준다.

 

📣  해결 방법

✔️ 컴포넌트와 관련있는 state는 될 수 있으면 가까이 유지하는 방법 

✔️ 상태관리 라이브러리 사용하는 방법

---

📣  Redux

✔️ Redux : 전역 상태를 관리할 수 있는 저장소인 Store를 제공하는 상태 관리 라이브러리

 

📣  Redux의 구조

 

✔️ Redux의 상태 관리 순서

1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성된다.

2. 이 Action 객체는 Dispatch 함수의 인자로 전달된다.

3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해준다.

4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경한다.

6. 상태가 변경되면, 리액트는 화면을 다시 렌더링 한다.

 

➰ Action -> Dispatch -> Reducer -> Store 순서로 데이터가 단방향으로 흐르게 된다.

 

📣  Store

✔️ 상태가 관리되는 오직 하나뿐인 저장소 역할을 한다.

➰ Redux 앱의 state가 저장되어 있는 공간

import { createStore } from 'redux';

const store = createStore(rootReducer);

➰ createStore 메서드를 활용해서 Reducer를 연결해서 Store를 생성할 수 있다.

 

📣  Reducer

✔️ Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는 함수

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

 

➰ 여러 개의 Reducer를 사용하는 경우, Redux의 combineReducers 메서드를 사용해서 하나의 Reducer로 합쳐줄 수 있다.

import { combineReducers } from 'redux';

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

 

📣  Action

✔️ 어떤 액션을 취할 것인지 정해 놓은 객체

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

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

➰ type은 해당 Action 객체가 어떤 동작을 하는지 명시해주는 역할을 하기 때문에 필수로 지정해주어야 한다.

➰ 대문자와 Snake Case로 작성하며, 필요에 따라 payload를 작성해서 구체적인 값을 전달한다.

 

➰ 보통 Action을 직접 작성하기보다는 Action 객체를 생성하는 함수를 만들어 사용한다 -> 액션 생성자

// 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) );

➰ Action 객체를 전달받은 Dispatch 함수는 Reducer를 호출한다.

 

📣  Redux Hooks

✔️ React-Redux에서 Redux를 사용할 때 활용할 수 있는 Hooks 메서드를 제공한다.

 

1️⃣ useDispatch()

✔️ Action 객체를 Reducer로 전달해 주는 Dispatch 함수를 반환하는 메서드

import { useDispatch } from 'react-redux'

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

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

 

2️⃣ useSelector()

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

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

 

📣  Redux 의 세 가지 원칙

1️⃣ Single source of truth

➰ 동일한 데이터는 항상 같은 곳에서 가지고 와야 한다.

➰ Redux에는 데이터를 저장하는 Store라는 단 하나뿐인 공간이 있음과 연결 되는 원칙

 

2️⃣ State is read-only

➰ 리액트의 state 처럼 Redux의 상태도 직접 변경할 수 없음을 의미한다.

➰ Action 객체가 있어야만 상태를 변경할 수 있음과 연결 되는 원칙

 

3️⃣ Changes are made with pure functions

➰ 변경은 순수 함수로만 가능하다.

➰ 상태가 엉뚱한 값으로 변경되는 일이 없도록 순수 함수로 작성되어야하는 Reducer 와 연결되는 원칙

---

📚 참고할 만한 레퍼런스 링크

robinwieruch 블로그: Redux

FLUX 패턴 공식 문서