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

이제부터 App 컴포넌트를 수정해보겠습니다. 먼저 인풋값을 관리하는 코드 먼저 작성해봅시다. 그러기 위해서는 컴포넌트를 스토어와 연결해주어야 합니다. 아래와 같이 수정해주세요.

• src/App.js

import React from "react";
import InputBox from "./components/InputBox";
import PhoneList from "./components/PhoneList";
import "./App.css";
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as inputActions from './store/modules/input';
import * as dataActions from './store/modules/data';

const App = ({ name, phone, data, inputActions, dataActions }) => {
  return (
    <div className="container">
      <InputBox />
      <PhoneList />
    </div>
  );
}

export default connect(
  state => ({
    name: state.input.name,
    phone: state.input.phone,
    data: state.data
  }),
  dispatch => ({
    inputActions: bindActionCreators(inputActions, dispatch),
    dataActions: bindActionCreators(dataActions, dispatch)
  })
)(App);

connect 함수를 통해 state와 액션 함수들을 props로 매핑시켜주었습니다. 그리고 App 컴포넌트에서 매핑한 state와 함수들을 props로 받아주었습니다. 여기서는 mapStateToProps와 mapDispatchToProps 함수를 connect 함수 내부에 만들어주었습니다.

다음으로는 인풋값을 관리해주는 함수인 handleChange 먼저 작성해보겠습니다. handleChange 함수는 name과 value 값이 들어있는 객체를 데이터로 받는 setInputValue 액션 함수를 사용합니다. 그럼 다음과 같이 코드를 수정해주세요.

• src/App.js

import React from "react";
import InputBox from "./components/InputBox";
import PhoneList from "./components/PhoneList";
import "./App.css";
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as inputActions from './store/modules/input';
import * as dataActions from './store/modules/data';

const App = ({ name, phone, data, inputActions, dataActions }) => {

	const handleChange = e => {
    const { name, value } = e.target;
    inputActions.setInputValue({ name, value });
  }

  return (
    <div className="container">
      <InputBox
				name={name}
        phone={phone}
        onChange={handleChange}
        onSubmit={handleSubmit}			
			/>
      <PhoneList />
    </div>
  );
}

export default connect(
  state => ({
    name: state.input.name,
    phone: state.input.phone,
    data: state.data
  }),
  dispatch => ({
    inputActions: bindActionCreators(inputActions, dispatch),
    dataActions: bindActionCreators(dataActions, dispatch)
  })
)(App);

이번 프로젝트에서는 저번에 Hooks를 적용한 프로젝트 때와는 다른 props를 넘겨줍니다. 이에 따라 InputBox 컴포넌트도 변경한 코드에 맞추어 수정해줘야 합니다. 다음과 같이 InputBox 컴포넌트를 변경해주세요.

• src/components/InputBox/InputBox.js

import React from "react";
import styles from "./InputBox.module.css";

const InputBox = ({ name, phone, onChange, onSubmit }) => {
  return (
    <div className={styles.input_boxes}>
      <div className={styles.input_box}>
        <div className={styles.input_box_name}>이름</div>
        <input
          type="text"
          placeholder="이름"
          name="name"
          className={styles.input_box_input}
          onChange={onChange}
          value={name}
        />
      </div>
      <div className="input_box">
        <div className={styles.input_box_name}>전화번호</div>
        <input
          type="text"
          placeholder="전화번호"
          name="phone"
          className={styles.input_box_input}
          onChange={onChange}
          value={phone}
        />
      </div>
      <button className={styles.input_box_button} onClick={onSubmit}>
        저장
      </button>
    </div>
  );
};

export default InputBox;

InputBox 컴포넌트에서는 name, phone, onChange, onSubmit 을 Props로 받습니다. Redux를 통해 name과 value 값을 넘겨주어 상태를 변경할 수 있으므로 저번과는 다르게 onChange와 같이 하나의 함수로 합쳤습니다.