전화번호부 프로젝트를 여러개의 컴포넌트로 나눠봅시다.

우선 디렉토리와 파일을 만들어봅시다. 아래의 구조와 같이 디렉토리/파일을 만들어보세요.

[project-name]

• src
  • components
    • PhoneList
      • PhoneList.js
      • PhoneList.css
      • index.js
    • PhoneItem
      • PhoneItem.js
      • PhoneItem.css
      • index.js
    • InputBox
      • InputBox.js
      • InputBox.css
      • index.js
  • App.js
  • App.css
  • index.js
  • serviceWorker.js

우선 4가지의 컴포넌트에 대해 간단하게 설명해드리겠습니다.

1. App 컴포넌트는 렌더링할 컴포넌트로 components 디렉토리에 있는 PhoneList 컴포넌트와 InputBox 컴포넌트를 포함할 것입니다.
2. PhoneList 컴포넌트는 여러 개의 PhoneItem 컴포넌트를 띄워 줄 것입니다.
3. PhoneItem 컴포넌트는 이름, 전화번호, 삭제 버튼을 가진 컴포넌트입니다.
4. InputBox 컴포넌트는 이름과 전화번호를 입력받는 폼이 있는 컴포넌트입니다.

그다음, components 디렉토리 안에 있는 여러 개의 컴포넌트 안에 있는 파일들을 설명하겠습니다.

1. components-name.js 는 렌더링할 HTML 코드가 있는 파일입니다.
2. components-name.css 는 스타일 속성을 지정해놓은 파일입니다.
3. index.js 는 같은 디렉토리에 있는 컴포넌트를 export하는 파일입니다. 이 파일을 사용하는 이유는 프로젝트를 진행하면서 말씀드리겠습니다.