TIL-35, React-Redux

Redux란?

자바스크립트 어플리케이션을 위한 라이브러리이며,

어플리케이션의 상태(state)를 저장, 관리한다.

Redux를 사용하는 이유

1. 편의성 리액트에서는 어떠한 상태를 받아올 때 부모 컴포넌트로부터 받아온다. 그런데 만약, 부모 컴포넌트의 형제 컴포넌트도 같은 상태를 받아오기 위해서는 정보를 그 위의 부모 컴포넌트에서 관리해야 한다. 여기서 또! 그 위의 부모 컴포넌트의 형제 컴포넌트 역시 같은 상태를 받아오기 위해서는 다시 그 위의 부모 컴포넌트에서 상태를 관리해야 하고, 점점점 올라가 결국에는 Root 컴포넌트에서 상태를 관리하며 모든 컴포넌트에 뿌려주는 복잡한 구성이 될 수 있다. 극단적인 예로, 하위 컴포넌트를 100만개 가지는 어플리케이션에서, 최상단 컴포넌트에서 관리하는 상태를 최하위 컴포넌트에서 사용하고자 한다면 props를 100만번이나 내려줘야 하는 아주 복잡한 구성이 된다. 하지만, 상태를 한곳에 몰아서 저장을 해놓고, 그곳에서 직접적으로 정보를 꺼내서 바로 사용한다면, 모든 컴포넌트가 props없이 state를 직접 꺼내 쓸 수 있는 간단한 구성이 가능하다.
2. 상태 관리의 용이 100만개의 컴포넌트를 가지는 어플리케이션에서 부모 컴포넌트로부터 내려받은 상태를 각각의 컴포넌트에서 수정을 해준다고 가정해보자. 이때 각 상태를 변경하는 부분에서 버그가 발생했을때, 우리는 100만개의 컴포넌트의 어떤 상태변경 함수가 버그를 일으켰는지 알아내려면 100만개의 컴포넌트를 의심하고 뒤져봐야 할 것이다. 하지만, 상태를 한 곳에 몰아서 저장을 해놓고 사용한다면, 버그가 발생했을 때 그 곳만 점검해보면 되므로 상태 관리가 용이하다.

Redux의 3가지 원칙

1. Single Source of Truth (진실은 하나의 근원으로부터)

• 애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장된다. → Store에

1. State is Read-Only (상태는 읽기 전용)

• 상태를 변화시키는 유일한 방법은 무슨 일이 벌어지는 지를 묘사하는 액션 객체를 전달하는 방법 뿐이다. → Action

1. Changes are made with pure functions (변화는 순수 함수로 작성)

• 액션에 의해 상태 트리가 어떻게 변화하는 지를 지정하기 위해 프로그래머는 순수 reducer를 작성해야 한다. → Reducer

Redux의 흐름

Component에서 dispatch 함수를 이용해 actionc을 호출하고, reducer가 action을 핸들링 해 상태값을 업데이트 하고, 그 정보를 다시 Component에 전달해 최종적으로 업데이트한다.

구조

action의 구조

export const 타입명 = "타입명";

export const 액션함수이름 = (인자) => {
  return {
    type: 타입명,
    paload: {
      키: 값,
    },
  };
};

각각의 상황에따라 당연히 다르겠지만, 기본적으로 갖출것을 갖춘 action의 구조이다.

이 action을 아래의 reducer에서 핸들링한다.

import { 타입명 } from 'action 경로'

const 리듀서 = (state = 기본값, action) => {
  switch (action.type) {
    case 타입명:
      return {
        원하는 조건
    }
  }
}

현재 내 배경지식이 학습한 Sprint 범위까지이므로,

위 처럼 나타냈는데, action, reducer가 도대체 뭐드라? 할 때 기본적인 틀을 생각해낼 때 참고만 하자.