[프론트엔드] 리덕스를 사용하여 리액트 어플리케이션 상태 관리하기[1]

728x90

1. 작업 환경 설정

리엑트 프로젝트를 생성하고, 해당 프로젝트에 리덕스를 적용합니다.

아래와 같이 프로젝트를 추가 생성합니다.

yarn create react-app react-redux-tutorial

생성한 프로젝트 디렉토리에 yarn 명령어를 사용하여 redux, react-redux 라이브러리를 설치합니다.

cd react-redux-tutorial
yarn add redux react-redux

다음과 같이 디렉토리에 prettierrc 파일을 작성합니다.

- prettierrc

{
    "singleQuote": true,
    "semi": true,
    "useTabs": false,
    "tabWidth": 2,
    "trailingComma": "all",
    "printWidth": 80
}

2. UI 준비하기

UI 관련된 프레젠테이셔널 컴포넌트는 src/components 경로에 저장하고,

리덕스와 연동된 컨테이너 컴포넌트는 src/containers 컴포넌트에 작성합니다.

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

숫자를 더하고 뺄 수 있는 카운터 컴포넌트를 만들겠습니다.

components 디렉티리를 생성하고, 그 안에 Counter 컴포넌트를 작성합니다.

- components/Counter.js

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;

- App.js

import React from "react";
import Counter from "../components/Counter";

const App = () => {
  return (
    <div>
      <Counter number={0} />
    </div>
  )
}

export default App;

프로젝트 개발서버를 실행합니다

yarn run start

4. 카운터 UI