전화번호부 프로젝트에 Redux를 적용해봅시다.

Redux를 사용하기 위해서는 전화번호부 프로젝트에 Redux 관련 라이브러리를 설치해야 합니다. 아래와 같이 커맨드를 입력해주세요.

yarn add redux react-redux redux-actions immer

그런 다음 프로젝트 구조 및 파일들을 수정하겠습니다. 이번 챕터를 진행하면서 필요하지 않은 파일은 지우고, Redux 관련 파일을 추가하겠습니다. 또, 컴포넌트 내부 코드도 변경하겠습니다. 먼저 아래와 같이 프로젝트 폴더를 구성해주세요.

[project-name]

• src
  • components
    • InputBox
      • InputBox.js
      • InputBox.module.css
      • index.js
    • PhoneItem
      • PhoneItem.js
      • PhoneItem.module.scss
      • index.js
    • PhoneList
      • PhoneList.js
      • index.js
  • store
    • modules
      • input.js
      • data.js
    • index.js
  • App.js
  • App.css
  • index.js
  • serviceWorker.js

Redux 관련 파일 및 폴더를 추가했고, Hooks와 dummyData 파일을 삭제했습니다. Redux에서 상태 관리 역할을 수행할 수 있기 때문에 지워주었습니다. 그리고 아래와 같이 App 컴포넌트를 수정해주세요.

• src/App.js

import React from "react";
import InputBox from "./components/InputBox";
import PhoneList from "./components/PhoneList";
import "./App.css";

const App = () => {
  return (
    <div className="container">
      <InputBox />
      <PhoneList />
    </div>
  );
}

export default App;

이 상태에서 프로젝트를 실행시키면 필요한 데이터를 넘겨주지 않았기 때문에 오류가 발생합니다. App 컴포넌트를 수정해보며 이때 프로젝트를 실행시켜도 된다고 싶을 때 다시 언급하겠습니다. 다음 장부터 Redux 코드를 구성해보며 프로젝트를 진행해봅시다.