5. Split PhoneBook Project (5)

PhoneItem 컴포넌트를 PhoneList 컴포넌트에서 분리해봅시다.

PhoneList.js에서 class가 phone_item인 div element 전체를 잘라냅시다. 그리고 아래와 같이 만들어봅시다.

src/components/PhoneItem/PhoneItem.js

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

const PhoneItem = () => {
  return (
    <div className="phone_item">
      <div className="phone_item_left">
        <div className="phone_item_name">홍길동</div>
        <div className="phone_item_phone">010-0000-0000</div>
      </div>
      <div className="phone_item_right">
        <button>삭제</button>
      </div>
    </div>
  );
};

export default PhoneItem;

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

src/components/PhoneItem/PhoneItem.css

.phone_item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #495057;
  padding: 20px;
}

.phone_item + .phone_item {
  margin-top: 15px;
}

.phone_item_right button {
  color: #fa5252;
  font-size: 15px;
  font-weight: bold;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}

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

src/components/PhoneItem/index.js

export { default } from "./PhoneItem";

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