17. 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기(1)

• 소규모 프로젝트에서는 컴포넌트가 가진 state를 사용하는 것만으로도 충분하지만, 프로젝트의 규모가 커짐에 따라 상태 관리가 번거로워질 수 있습니다.
• 리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리하여 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는 데 도움이 됩니다.
• 또한, 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하며,
• 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해 줄 수도 있습니다.
• store 보단 react-redux 라이브러리에서 제공하는 유틸 함수 connect와 컴포넌트 Provider 사용하여 리덕스 관련 작업 처리.

작업 환경 설정

• yarn create react-app react-redux-tutorial
• cd react-redux-tutorial
• yarn add redux react-redux

리덕스 관련 코드 작성하기

• 리덕스 관련 코드를 준비합니다.
• 리덕스를 사용할 때는 액션 타입, 액션 생성 함수, 리듀서 코드를 작성해야 하는데요.
• 이 코드들을 각각 다른 파일에 작성하는 방법도 있고, 기능별로 묶어서 파일 하나에 작성하는 방법도 있습니다.

• 위 사진은 가장 일반적인 구조로 actions, constants, reducers라는 세 개의 디렉터리를 만들고 그 안에 기능별로 파일을 하나씩 만드는 방식입니다.

• 위 사진은 액션 타입, 액션 생성 함수, 리듀서 함수를 기능별로 파일 하나에 몰아서 다 작성하는 방식입니다.
• 이러한 방식을 Ducks 패턴이라고 부르며, 앞서 설명한 일반적인 구조로 리덕스를 사용하다가 불편함을 느낀 개발자들이 자주 사용합니다.
• Ducks 패턴을 사용하여 액션 타입, 액션 생성 함수, 리듀서를 작성한 코드를 ‘모듈’이라고 합니다.

액션 타입 정의하기

• 가장 먼저 해야 할 작업은 액션 타입을 정의하는 것입니다.
• 액션 타입은 대문자로 정의하고, 문자열 내용은 '모듈 이름/액션 이름'과 같은 형태로 작성합니다.
• 문자열 안에 모듈 이름을 넣음으로써, 나중에 프로젝트가 커졌을 때 액션의 이름이 충돌되지 않게 해 줍니다.

루트 리듀서 만들기

• createStore 함수를 사용하여 스토어를 만들 때는 리듀서를 하나만 사용해야 한다.
• 리덕스에서 제공하는 combineReducers 유틸 함수를 이용하여 하나로 합친다.
• modules/index.js에 작성

리액트 애플리케이션에 리덕스 적용하기

• 스토어를 만들고 리액트 애플리케이션에 리덕스를 적용하는 작업은 src/index.js에서 이루어짐

1. 스토어 만들기

• redux의 createStore 함수를 이용하여 스토어 생성
• src/index.js 에 추가
• import {createStore} from 'redux'; import rootReducer from './modules' const store = createStore(rootReducer)

2. Provider 컴포넌트를 사용하여 프로젝트에 리덕스 적용하기

• 리액트 컴포넌트에서 스토어를 사용할 수 있도록 App 컴포넌트를 react-redux에서 제공하는 Provider로 감싸준다.
• src/index.js 에 추가
  • connect를 쓸 때 연결 가능
• import {Provider} from 'react-redux' <Provider store ={store}><App /></Provider>

3. Redux DevTools 설치, 이용

• 리덕스 개발자 도구. 크롬 확장 프로그램으로 설치하여 사용 가능하다.
• 패키지를 설치하여 적용
  • yarn add redux-devtools-extension

컨테이너 컴포먼트 만들기

• 컨테이너 컴포먼트 : 리덕스 스토어와 연동된 컴포넌트
  • 리덕스 스토어에 접근하여 원하는 상태를 받아 오고, 액션도 디스패치 해주는 과정

CounterContainer 만들기

• src/containers/CounterContainer.js 생성 ( CounterContainer 컴포넌트 생성)
• 위 컴포넌트를 리덕스와 연동하기 위해 connect 함수 사용 (react-redux 제공)
  • mapStateProps : 리덕스 스토어 안의 상태를 컴포넌트의 props로 넘겨주기 위한 설정
  • mapDispatchToProps : 액션 생성 함수를 컴포넌트의 props로 넘겨주기 위해 사용하는 함수
  • connect 함수를 호출하면 함수를 반환. 이 함수에 컴포넌트를 파라미터로 넣어주면 리덕스와 연동된 컴포넌트 생성
    • const makeComponent = connect(mapStateToProps, mapDispatchToProps)
    • makeComponent(연동할 컴포넌트)