React에서의 Redux

Redux 사용하기 전 상태관리

• ❗️ 상태를 다른 컴포넌트에서도 사용해야 할 때
  1. 컴포넌트들의 공통된 부모 컴포넌트에 상태를 올려준다.
  2. 상태를 사용할 컴포넌트까지 props를 통해 상태를 내려준다.
• 상태를 사용하지 않는 컴포넌트들도 상태 데이터를 가지게 된다.
• props를 오로지 하위 컴포넌트에 상태를 전달하는 용도로 사용하면서 props drilling 을 겪게 되는데, 앱의 구조가 복잡해질 수록, 컴포넌트의 깊이가 깊어질수록 props drilling 이 심각해진다.
• 앱의 구조가 변경되면 데이터 흐름도 변경되어 다시 처음부터 데이터의 흐름을 고민해야 될 수도 있다. (유지보수가 힘들다)

Redux로 상태관리

• store 에서 전역 상태를 관리할 수 있어서 상태를 끌어올려주고, 내려주는 상황을 피할 수 있어 과도한 props drilling 을 피할 수 있다.
• 컴포넌트와 상태를 분리할 수 있다.
• React 없이도 사용할 수 있는 상태 관리 라이브러리

Redux 구조

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

Action

• 어떤 액션을 취할 것인지 정의해놓은 객체
• type 은 필수로 지정
• 필요에 따라 새로운 키와 값을 만들 수 있다.

// type 은 필수로 지정
{ type : "ADD" }

// 필요에 따라 새로운 키와 값을 만들 수 있다.
{ type : "ADD" , id: Date.now() }

• Action 객체를 생성하는 함수를 만들어 사용하는 경우가 많다.

  // 액션 생성자 Action Creater
  
  const add = () => {
    return {
      type: 'ADD',
  		id : Date.now(),
    }
  }

Dispatch

• Reducer 함수로 Action 을 전달해주는 함수
• Dispatch 함수의 인자는 Action 객체
• Dispatch 함수는 Reducer 함수 호출

import { useDispatch } from 'react-redux';

const dispatch = useDispatch();

// 액션 생성자 함수 전달
dispatch(add());

// 액션 객체 전달
dispatch({ type : "ADD" , id: Date.now() });

Reducer

• Dispatch 에게 전달받은 Action 객체의 type 값에 따라 상태를 변경시키는 함수
• Reducer 함수는 순수 함수이어야 한다.
  • 외부 요인으로 인해 기대한 값이 아닌 값으로 상태가 변경되면 안 됨
• 여러 개의 Reducer 함수를 만들 수 있다.

Store

• 상태가 관리되는 오직 하나뿐인 저장소
• state 가 저장되어 있는 공간
• createStore 메서드
  • Store 를 생성할 수 있다.
  • createStore 메서드의 인자로 Reducer 함수를 넣어 연결해야 한다.
    • Reducer 함수가 변경해야 하는 상태를 가져오기 때문

Redux Hooks

• useSelector
  • 컴포넌트와 state 연결
  • Redux의 state 에 접근할 수 있게 해준다.
• useDispatch
  • Action 객체를 Reducer 함수로 전달해주는 메서드

Redux의 세 가지 원칙

1. Single source of truth, 단일 진실 공급원

   동일한 데이터는 항상 같은 곳에서 가져와야 한다. ex) Store

2. State is read-only, 상태는 읽기전용이다.

   Redux의 상태를 직접 변경하는 것이 아닌 Action 객체를 통해서만 상태를 변경해야 한다.

3. Changes are made with pure functions, 변화는 순수함수를 통해서

   Reducer 함수를 순수함수로 작성해야 한다.