[React] 17장. 리덕스를 사용해리액트 애플리케이션 상태 관리하기

리덕스를 사용해 리액트 애플리케이션 상태를 관리하는 방법을 알아보자!

소규모 프로젝트라면 컴포넌트가 가진 state를 사용하는 것으로도 충분하지만, 프로젝트의 규모가 크면 상태 관리가 번거로워질 수 있다.

리액트 애플리케이션에서 리덕스를 사용하면, 상태 업데이트에 관한 로직을 모듈로 따로 분리해 컴포넌트 파일과 별개로 관리할 수 있어 유지보수에 좋다.

또한, 여러 컴포넌트에서 동일한 상태를 공유해야 할 때 매우 유용하고 실제 업데이트가 필요한 컴포넌트만 리렌더링되도록 쉽게 최적화해 줄 수도 있다.

---

1. 프로젝트 파일 생성

나는 16장 프로젝트에 그대로 진행할 예정이다.

2. 작업 환경 설정

① Prettier 적용
Prettier ⇒ JSON 객체는 코드 포맷팅 도구

• .prettierrc 파일 생성

3. UI 준비하기

✅ 리액트 프로젝트에서 리덕스를 사용할 때 많이 사용하는 패턴
⇒ 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트를 분리하는 것

이러한 패턴은 리덕스를 사용하는 데 필수 사항은 아님!

✔ 하지만, 이 패턴을 사용하면 코드의 재사용성도 높아지고
✔ 관심사의 분리가 이루어져 UI를 작성할 때 좀 더 집중할 수 있음.

• 프레젠테이셔널 컴포넌트
  주로 상태 관리가 이루어지지 않고, 그저 props를 받아 와서 화면에 UI를 보여 주기만 하는 컴포넌트.
  
  
• 컨테이너 컴포넌트
  리덕스와 연동되어 있는 컴포넌트로, 리덕스로부터 상태를 받아 오기도 하고 리덕스 스토어에 액션을 디스패치하기도 함.

• UI에 관련된 프레젠테이셔널 컴포넌트 ⇒ src/components 경로에 저장
• 리덕스와 연동된 컨테이너 컴포넌트 ⇒ src/containers 컴포넌트에 작성

3-1. 카운터 컴포넌트 만들기

숫자를 더하고 뺄 수 있는 카운터 컴포넌트

• Counter.jsx
  components 디렉터리 생성 후, 그 안에 Counter 컴포넌트 작성

import React from 'react';

const Counter = ({ number, onIncrease, onDecrease }) => {
  return (
    <div>
      <h1>{number}</h1>
      <div>
        <button onClick={onIncrease}>+1</button>
        <button onClick={onDecrease}>-1</button>
      </div>
    </div>
  );
};

export default Counter;

3-2. 할 일 목록 컴포넌트 만들기

해야 할 일을 추가하고, 체크하고, 삭제할 수 있는 할 일 목록 컴포넌트 만들기