1. 작업 환경 설정
2. UI 준비하기
3. 리덕스 관련 코드 작성하기
4. 리액트 래플리케이션에 리덕스 적용하기
5. 컨테이너 컴포넌트 만들기
6. Hooks를 사용하여 컨테이너 컴포넌트 만들기

UI 준비하기

• 가장 많이 사용하는 패턴
  👉 프리젠테이셔널 컴포넌트이름도 어렵네.. 와 컨테이너 컴포넌트 를 분리하는 것
  • 프리젠테이셔널 컴포넌트
    : (상태관리 x)props만 받아와서 화면에 UI를 보여 주기만 하는 컴포넌트 src/components
  • 컨테이너 컴포넌트
    : 리덕스와 연동되어 있는 컴포넌트 src/containers
  • ❗️리덕스 사용에 필수 사항은 아니다.
  • 이런 구조면 코드 재사용성⬆️, 관심사 분리가 이루어져 UI를 좀 더 집중할 수 있다.
    

---

리덕스 관련 코드 작성

• 일반적인 구조
  
• Ducks 패턴
  
  • 액션 타입, 액션 생성함수, 리듀서 함수를 기능별로 파일 하나에 몰아서 작성 (모듈이라고 한다.)

루트 리듀서 만들기

• conbineReducers 유틸 함수 사용

스토어 만들기

• src/index.js 에 생성

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

---

리덕스 DevTools 설치

• composeWithDevTools 를 createStore() 의 두 번째 파라미터에 넣는다.
  

---

컨테이너 컴포넌트 만들기

• connect 함수
  👉 connect(mapStateToProps, mapDispatchToProps)(연동할 컴포넌트)

  • mapStateToProps
    : 리덕스 스토어 안의 상태를 컴포넌트의 props로 넘겨주기 위해 설정하는 함수

  • mapDispatchToProps
    : 액션 생성함수를 컴포넌트의 props로 넘겨주기 위해 사용하는 함수

    ❖ 반환된 함수에 컴포넌트를 파라미터로 넣어주면 리덕스와 연동된 컴포넌트가 만들어진다.
    ❖ 익명함수 형태로도 가능

• bindActionCreators 유틸 함수

  • 액션 생성함수의 개수가 많아진다면 하용하면 편함
  • 👀 더 편한 방법
    mapDispatchToProps 에 해당하는 파라미터를 액션 생성함수로 이루어진 객체 형태로 넣어준다.

---

리덕스를 더 편하게 사용하기

redux-actions

• 액션 생성 함수를 더 짧은 코드로 작성할 수 있다.
• (todos 모듈), 각 액션 생성 함수에서 파라미터를 필요로 함
  • createAction 으로 액션을 만들면 액션에 필요한 추가 데이터는 payload라는 이름을 사용한다.
• 액션 생성함수는 액션에 필요한 추가 데이터를 모두 payload라는 이름으로 사용하기 떄문에, action.id, action.todo 를 조회하는 대신, 모두 공통적으로 action.payload 값을 조회하도록 리듀서 구현
  • 객체 비구조화 할당으로 payload 값이 뭔지 표시
    

immer 사용

• immer 을 사용하면 코드를 더 간단(?)하게 나타낼 수 있다.
  
  • 적절하게 섞어가며 쓰자~

---

Hooks를 사용하여 컨테이너 컴포넌트 만들기

• connect 함수 사용 대신 Hooks 사용
• 상태 조회
  const 결과 = useSelector(상태 선택 함수)
  • 상태 선택 함수는 mapStateToProps 와 형태가 같다.
• 액션 디스패치
  ❗️ useCallback 하고 같이 사용
  

• 리덕스 스토어 사용
  ❗️ 이를 사용해야 하는 상황은 흔하지 않음...

Hooks를 사용하여 컨테이너 컴포넌트 만들 때 주의할 점

• useSelector 로 리덕스 상태를 조회 했을 때는 최저화 작업이 자동으로 이루어지지 않으므로, 성능 최적화를 위해서는 React.memo() 를 컨테이너 컴포넌트에 사용해 줘야한다.