전화번호부를 하나의 컴포넌트에서 만들어보며 React의 기초 문법을 배워봅시다.

앞으로 React를 배워나가면서 하나의 프로젝트를 보완해 나갈 것입니다. 우선 전화번호부를 만들어볼 건데 여기서 저희가 배운 건 리액트 컴포넌트밖에 없으니 우선 하나의 컴포넌트 안에서 전화번호부를 만들어보겠습니다.

저희가 만들 전화번호부 프로젝트는 아래의 그림과 같습니다. 이름과 전화번호를 받아 저장하면 아래의 리스트에 추가될 수 있게 할 것입니다. 그리고 삭제 버튼을 눌러 자신이 원하는 아이템을 삭제하는 기능을 구현할 것입니다.

먼저 프로젝트 초기 설정부터 해봅시다. 우선 create-react-app을 통해 프로젝트를 만들어봅시다.

create-react-app [project-name]

여기서 대괄호로 둘러싸인 부분은 자신이 원하는 폴더/프로젝트 이름으로 설정하면 됩니다.

프로젝트가 정상적으로 생성되었다면 디렉토리 구조는 아래와 같을 것입니다.

[project-name]

• node_modules
• public
• src
  • App.css
  • App.js
  • App.test.js
  • index.css
  • index.js
  • logo.svg
  • serviceWorker.js
• package.json
• README.md
• yarn.lock

여기서 저희가 유심히 봐야 할 부분은 src 디렉토리입니다. 먼저 저희가 사용하지 않을 파일을 먼저 지우겠습니다. App.test.js, index.css, logo.svg 파일을 지워주세요. 그리고 index.js 파일에 들어가 위에서 세 번째 줄인 "import './index.css';" 구문을 지워줍니다. 이렇게 프로젝트를 시작할 준비를 마쳤고, 다음 장에서 전화번호부의 형태만 하나의 컴포넌트에서 만들어보겠습니다.