[React] 리덕스 개념 / 기초

리덕스란?

리덕스는 데이터를 관리하는 기술이다.

리덕스는 데이터를 스토어(store)라는 곳에서 관리한다. 스토어를 통해 데이터가 전파되고 컴포넌트는 스토어에 데이터 변경을 요청한다.

 

리덕스와 컨텍스트 차이

리덕스는 컨텍스트와 비슷하다. 단, 여러 개의 공급자를 관리하던 컨텍스트와 달리 리덕스는 스토어에서 모든 데이터를 관리한다.

 

컨텍스트	부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터
리덕스	서버에서 받은 데이터를 앱 전체에 전달하거나 관리

 

'서버에서 가져온 데이터를 이용하여 새로운 결과물을 만드는 경우 -> 리덕스

'컴포넌트의 통합 데이터를 관리하는 경우' -> 컨텍스트

 

리덕스 동작

리덕스의 동작을 이해하기 위해서는 스토어의 데이터의 변화과정의 이해가 필요하다.

아래의 그림은 스토어의 데이터가 변경되는 과정이다.

컴포넌트 - dispatch() 함수를 통해서 리듀서에 액션을 전달

액션 - 리듀서에서 처리해야 할 작업의 이름과 데이터가 객체형태로 들어있음 

리듀서 - 액션을 받아 스토어 변경 작업 진행

          - 스토어 변경 작업이 완료되면 connect()함수로 연결된 컴포넌트에 변경된 스토어의 데이터를 전파하여 동기화

 

리덕스 개발 준비하기

리덕스 설치방법

1. 리덕스와  react-redux설치

$ yarn add redux react-redux

 

2. 리덕스 크롬 확장 도구 설치

구글에 chrome redux devtools검색하여 설치

 

3. 리덕스 개발자 도구 설치

$ yarn add redux-devtools-extension --dev

리덕스를 활용한 코드와 리덕스 크롬 확장 도구 연동

 

리덕스로 스토어 생성하는 방법

스토어 생성을 위해서는 createStore()함수가 필요하다.

createStore(reducer, /*initial state*/, /*enhancer*/)

필수적으로 받아야하는 인자는 reducer이고 initial state(초기값), enhancer(미들웨어함수)는 생략이 가능하다.

(미들웨어는 리듀서 함수가 생성될 때 함께 실행되는 함수들로 후에 자세한 내용 설명 예정)

 

1. 스토어 생성하고 데이터 설정하고 리덕스 개발자 도구 연동하기

import React, { PureComponent } from 'react';
import { createStore } from 'redux'; //리덕스의 createStore함수 임포트
//react-redux의 Provider 컴포넌트를 사용하여 스토어 데이터를 하위 컴포넌트에 전달
import { Provider } from 'react-redux'; 

class ReduxApp extends PureComponent {
  store = createStore(
    state => state,
    //스토어 데이터의 초깃값을 {loading:false, name:'두잇 리액트'}로 설정
    { loading: false, name: '두잇 리액트' }, 
    //리덕스 개발자 도구 연동
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
  );

  render() {
    return <Provider store={this.store}>리덕스 예제</Provider>;
  }
}

export default ReduxApp;

2. 스토리를 스토리북에 추가하여 실행하기

import React from 'react';
import { storiesOf } from '@storybook/react';

import ReduxApp01 from '../07/ReduxApp01';

storiesOf('ReduxApp', module).addWithJSX('기본 스토어 설정', () => <ReduxApp01 />);

 

3. 리덕스 크롬 확장 도구를 이용하여 스토어데이터 확인해보기

[State]메뉴에서 [Tree]를 클릭하면 스토어 데이터의 초깃값을 확인할 수 있다.