React - Phone book 만들기 (2)

아직 Hook을 배우지 않아서 기존에 있는 함수 형태의 App.js를 class 형태로 변환하고 기본적인 code를 설명하면

import는 from으로부터 모듈을 가져온다는 것이다. import './App.css'는 App.css파일을 읽어와서 웹을 꾸민다.

주석 처리된 함수형과 아래 있는 class 형태는 같은 동작을 하는 코드이다.

export default App은 App이라는 함수를 내보낸다. 이것이 다른 파일에서 import로 불러와서 component로 사용이 가능하다.

 

주석처리한 부분을 지우고 파일 목록에서 component들을 한곳으로 모으는 폴더를 만든다. component 폴더 안에 있는 component는 실제로는 index.js에서 실행되기 때문에 index.js에 있는 App을 불러오는 위치를 from '../component/App으로 변경이 필요하다.

그리고 React App 사이트에 phone book을 어떻게 표현할지 구상하는 component를 만들려고 한다. 그래서 파일을 PhoneForm으로 정했다.

App.js

PhoneForm.js

phone book은 전화번호부 책인데 어떻게 꾸밀지 생각을 해보면...기본적으로 이름과 전화번호를 등록하는 란이 있어야 할거 같고, 그 아래에는 목록을 보여주는 형태로 우선 작성을 해보겠다.

나중에 내용을 추가하기 위해 form 태그를 사용했고, 여기에 이름을 입력하는 곳과 전화번호를 입력하는 곳을 만들었다.

PhoneForm.js

phone list 목록을 넣어주는 component를 따로 작성해서 PhoneForm에 import 하면

PhoneForm.js

Phonelist.js

React App

#React#phone-book#예제