React - Phone book 만들기(3)

Phonelist 파일에 직접 목록을 입력 했지만, 이것을 props 개념을 활용하여 App.js에서부터 받아오면

App.js 파일에 state를 만들고 render에서 information 변수로 PhonForm으로 상속 시켜준다.

App.js

PhoneForm에서는 App.js에서 상속받은 데이터를 this.props로 상속받은 데이터를 또 Phonelist에 상속을 시켜준다. 여기에서 key값도 같이 상속을 시켜주는데 React 공식문서에서 배열을 렌더 할때는 그배열을 구분해주는 unique한 key값을 가져한다고 한다. key를 따로 지정안해도 React App에서는 잘 렌더 되지만, console에서는 error를 발생한다.

PhoneForm.js

phonelist에서 information을 상속을 받아서 넣고자 하는 곳에 넣어주면 된다.

Phonelist.js

CSS 효과를 나중에 따로 하기위해 App.css 파일 내용만 지웠다.(파일은 그대로)

React App

 

일단 server와 database 개념을 도입하기 않았기 때문에, App에다가 information을 넣어 주었다. 나중에 server와 database 개념을 도입 시키면 App.js에서 있는 state 내용은 삭제 할 수 있다.

 

#React#phone-book#예제