React - Phone book 만들기(5)

지금까지 구현한 것들을 도식화하면 다음과 같다.

그러면 추가하는 data를 출력을 했으면, 추가를 하는 것을 구현을 하면된다.

App.js에서 handleCreate 함수에서 매개변수로 받은 data를 state에 추가를 하면된다. 여기서 handleCreate에 이전에 데이터들을 받아온다. 그 이유는 React는 새로 생성 되거나 변경사항이 있으면 렌딩이 다시 되기 때문에 기존의 데이터에는 영향을 주면 안된다. 아직 간단한 예제라서 잘 이해는 안되지만...

그렇기 때문에 Javascript에서 주로 사용했던 push, pop 같은 mutable한 방식대신에 immutable한 concat, slice 같은 메소드들을 사용해야 한다.

App.js

React App을 확인해보면...그리고 여기서 부터는 console도 좋지만 react 개발할때 좋은 devTool을 사용합니다. component에서 state값과 props를 실시간으로 확인할 수 있어서 좋은것 같습니다.(그래서 같이 사용합니다)

철수랑 번호, 영희와 번호를 등록버튼을 눌러서 데이터를 추가했고, App=>PhoneForm=>Phonelist로 상속되는 값들을 확인할 수  있습니다. 그리고 아직 영희1과 번호를 등록 버튼을 누르기 전인데 우측하단에 state값이 어떻게 되는지 바로바로 보여줍니다.

React App

전화번호가 없어지는 상황도 있기 때문에 삭제 기능을 구현을 하면

App.js에 handleRemove 함수를 만든다. 그리고 이전까지의 data을 가져온다. filter 함수를 통해서 삭제한 data를 제외한 나머지 data들을 보여주면 삭제된 것처럼 보이지만 메모리에는 아직 data는 남아 있을 것이다. 즉, 메모리에는 아직 남아 있고 삭제한 data 이외 나머지들을 보여준다.

App.js

PhoneForm에서는 따로 구현을 하지 않고 Phonelist에 넘겨주기만 한다. 나중에 CSS 에서 필요할거 같아서 class를 추가했다.

PhoneForm

list에 삭제버튼을 생성 했기 때문에 각각 글마다 삭제 버튼이 존재하게 된다. 그리고 데이터를 생성하면 거기에도 삭제 버튼인 생긴다.

Phonelist.js

 

 React App

철수와 홍길동 삭제 버튼을 클릭하면 잘 동작하는 것을 확인.

React App

#React#Phonebook#예제