InputBox 컴포넌트를 App 컴포넌트에서 분리해봅시다.

가장 먼저 InputBox 컴포넌트부터 만들겠습니다. class가 input_boxes인 div element 전체를 잘라냅시다. 그리고 그 코드를 넣어 아래와 같이 만들어봅시다.

• src/components/InputBox/Inputbox.js

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

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

export default InputBox;

다음으로 App.js에 있는 InputBox 컴포넌트에서 사용되는 스타일을 모두 잘라내어 InputBox.css 파일에 붙여넣기 해봅시다

• src/components/InputBox/InputBox.css

.input_boxes {
  margin: 50px 0;
  display: flex;
  flex-direction: column;
}

.input_box {
  padding: 10px 0;
}

.input_box_name {
  margin-bottom: 3px;
}

.input_box_input {
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  outline: none;
}

.input_box_button {
  margin-left: auto;
  width: 100px;
  padding: 10px;
  outline: none;
  border: 1px solid #495057;
  background: white;
  color: #495057;
  cursor: pointer;
  margin-top: 10px;
}

.input_box_button:hover {
  background: #495057;
  color: white;
}

마지막으로 index.js 파일을 수정해봅시다.

• src/components/InputBox/index.js

export { default } from "./InputBox";

InputBox 컴포넌트를 만들었다면 App 컴포넌트에서 InputBox 컴포넌트를 불러와 잘 동작하는지 확인해봅시다. 아래와 같이 변경해주세요.