리덕스와 리액트 사용

컴포넌트가 가진 state는 프로젝트의 규모가 커짐에 따라 상태 관리가 번거로워질 수 있습니다.

리덕스를 사용하면, 상태 업데이트에 관한 로직을 컴포넌트 파일과 별개로 관리할 수 있으므로 코드를 유지 보수하는데 도움이 됩니다.

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

16장에서는 store, dispatch, subcribe 를 사용했지만 react-redux라는 라이브러리에서 제공하는 함수를 사용하여 처리합니다.

작업환경 설정

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

.prettierrc

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

설명

리액트&리덕스 가장 많이 사용하는 패턴은 프레젠테이션 컴포넌트와 컨테이너 컴포넌트를 분리하는 것 입니다.

• Presentation components: props를 받아와서 화면에 uI를 보여주기만 하는 컴포넌트
• Container components: 리덕스와 연동되어 있는 컴포넌트

카운터 UI 만들기

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;

할일 목록 UI 만들기

components/Todos.js

import React from 'react';

const TodoItem = ({ todo, onToggle, onRemove }) => {
  return (
    <div>
      <input type="checkbox" />
      <span>예제 텍스트</span>
      <button>삭제</button>
    </div>
  );
};

const Todos = (
  input, // 인풋에 입력되는 텍스트
  todos, // 할일 목록이 들어있는 객체
  onChangeinput,
  onInsert,
  onToggle,
  onRemove,
) => {
  const onSubmit = (e) => {
    e.preventDefault();
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input />
        <button type="submit">등록</button>
      </form>
      <div>
        <TodoItem />
        <TodoItem />
        <TodoItem />
        <TodoItem />
        <TodoItem />
        <TodoItem />
        <TodoItem />
      </div>
    </div>
  );
};

export default Todos;

App.js

import React from 'react';
import Counter from './components/Counter';
import Todos from './components/Todos';

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

export default App;