[React] 리덕스 간단하게 알아보기

드디어 리덕스를 공부하기 시작했다. 유데미 강의에서 나온 리덕스의 간단한 개요를 짧게 정리해본다.

 

---

 

 

📌 들어가며

리액트는 그야말로 '상태 관리'가 로직의 핵심이다. 이 상태 관리는 애플리케이션이 작을 때는 props 로 관리가 가능하지만 무한히 늘어나는 페이지(컴포넌트)와 그에 따른 상태들을 관리하다보면 한 컴포넌트 안에서도 엄청나게 많은 props를 생성해서 내려보내주어야 하고, 개발하다보면 c 컴포넌트에서 d 컴포넌트로 props를 내려주면 될 줄 알았는데 실은 b에서 내려줘야 해서 그냥 a 컴포넌트로 state를 올려버리는 경우도 생긴다.

이런 경우들을 해결하기 위해 리액트에서는 자체적으로 상태관리를 위해 context 라는 메소드를 가지고 있지만 아쉬운 부분이 있다.

 

 

State를 사용하는 범위에 따라서는 아래와 같이 나눠볼 수 있다.

 

 

 

위 그림에서 redux가 필요한 부분은 App-Wide State다.

 

 

 

 

📌 redux란

 

리덕스 공식문서에서는 리덕스를 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너라고 표현한다. 공식문서

다시 말해 리덕스는 크로스 컴포넌트(앱 와이드)의 상태 관리 시스템인데,

이를 통해 불필요한 props drilling(상태 관리 시스템 없이 상태를 관리하면 필연적으로 해야 함)을 하지 않을 수 있고 이미 리액트에 있는 내장 기능인 context를 사용할 때 생기는 context 중첩 또한 발생하지 않게 할 수 있다.

 

context의 과한 중첩

 

 

📌 redux의 원리

 

리액트는 기본적으로 상태를 저장하는 중앙 데이터 저장소(Store)와 이 저장소를 구독하는 컴포넌트들(Components), 그리고 이 저장소 안의 상태를 변경할 수 있게 해주는 리듀서 함수(Reducer)와 이 리듀서 함수가 실행될 수 있는 트리거인 액션(Action)이 있다.

 

 

 

 

 

📌 redux사용하기

 

1. redux 를 프로젝트에 설치한다. 

 

# npm 으로 redux 설치
npm install redux react-redux

# yarn 으로 redux 설치
yarn add redux

 

 

2. 중앙 저장소를 생성한다.

 

저장소Store는 리덕스의 가장 중요한 개념이다.

이 저장소Store는 데이터를 관리하고 저장소Store가 관리하는 데이터는 리듀서 함수에 의해서 결정된다.

 

//redux에서 createStore을 import
import { createStore } from "redux";


//store 생성
const store = redux.createStore();

 

* 현재는 createStore 메소드가 deprecated 되어있다는 메시지가 VSCode로부터 나올 때가 있다.

   실제 완전히 deprecated 된 것은 아니기 때문에 아래와 같이 import를 바꿀 수 있다. 

 

import {legacy_createStore as createStore} from 'redux'

 

 

3. 리듀서 함수를 생성한다. 

 

리듀서 함수는 표준 자바스크립트 함수로 항상 2개의 파라미터를 받게 된다.

2개의 파라미터는 기존의 상태(State)와 컴포넌트에서 발송된(Dispatch) 액션(Action)이다.

리듀서는 컴포넌트에서 보낸(Dispatch) 액션(Action)이 도착할 때마다 새로운 상태(State) 스냅샷을 뱉어내게 된다.

그리고 이 리듀서는 반드시 새로운 상태 객체를 리턴해야 한다.

이 새로운 상태 객체가 기존의 상태를 대체하게 된다.

 

const somethingReducer = (state, Action) => {

  return {
    key: value;
  }
};

 

 

4. 저장소에 리듀서 함수 반영하기

 

저장소(Store)에 리듀서 함수를 인자로 넣어준다.

저장소(Store)는 데이터를 조작하는 리듀서 함수가 어떤 함수인지 알아야 한다.

 

//store에 리듀서 반영

const store = redux.createStore(somethingReducer);

 

5. 저장소를 구독할 컴포넌트에 구독 함수를 생성하기

 

생성한 함수 안에서 저장소(Store)의 메소드 getState를 호출할 수 있다.

getState() 메소드는 createStore()로 생성된 저장소에서 사용할 수 있으며

상태(State)가 업데이트 된 이후에 컴포넌트에게 최신의 상태(State)를 받아온다.

이 구독 함수는  상태가 변경될 때 마다 트리거 된다.

함수가 트리거 되면 getState() 메소드로 변경된 후의 최신 상태(State)를 받을 수 있다.

그리고 리덕스가 이 구독 함수를 인식하고 상태(State)가 변경될 때 마다 구독 함수를 실행시키도록

store 객체에서 subscribe() 메소드를 부르고 그 안에 구독 함수를 인자로 넣어준다.

 

이렇게 되면 리덕스는 데이터와 저장소가 변경될 때 마다 구독 함수를 실행해준다.

 

//구독 함수
const somethingSubscriber = () => {
  //최신 상태
  const latestState = store.getState();
  console.log(latestState);
};

store.subscribe(somethingSubscriber);

 

6. 액션만들고 발송하기

 

store 객체에서 .dispatch() 메소드를 호출한다. 

액션(Action)은 reducer 함수를 사용하는 것처럼 자바스크립트 객체를 넣어준다.

일반적으로 { type: '문자열' }로 사용한다.

 

 

//액션 발송
store.dispatch({ type: 'increment' });
store.dispatch({ type: 'decrement' })

 

 

 

 

 

📌 출처 및 참고문서

 

 

리덕스 공식 문서