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

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

• src/components/PhoneList/PhoneList.js

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

const PhoneList = () => {
  return (
    <div className="phone_list">
      <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>
      <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>
      <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>
    </div>
  );
};

export default PhoneList;

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

• src/components/PhoneList/PhoneList.css

.phone_list {
	display: flex;
	flex-direction: column;
}

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

• src/components/PhoneList/index.js

export { default } from "./PhoneList";

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