분류 전체보기144 React - Phone book 만들기(마무리) 데이터를 생성 삭제 수정 기능까지 구현을 했다. 만약 데이터 양이 많아서 원하는 데이터를 찾기가 어려우면?? 검색기능이 있으면 될것같다. App.js에서 검색하면 글자들을 담을 수 있는 keyword라는 state를 만들었다. 그리고 handleSearch라는 함수를 만들고 변화되는 값을 keyword에 넣었다. 형태를 나타내는 코드는 PhoneForm에 작성을 했기 때문에 PhoneForm에 검색창을 만들었다. 그리고 검색창에서 들어오는 값을 handleSearch에서 받아 주어야 하기 때문에 statelift로 전달을 하면 된다. 검색하는 창이 구현이 되었고, 검색한 것이 잘 전달 되는지 확인을 하면 input 값이 잘 출력 되는것을 확인. input값을 받아오고 그 값을 기존에 있는 informat.. 2020. 8. 9. React - Phone book 만들기(6) data를 수정하는 기능을 넣으려고 하는데 이전까지 phonelist를 함수형으로 진행했는데, 수정하는 기능은 toggle형태가 필요하고, state 값을 바꿔야 하기때문에 함수형을 class형으로 변환해야한다. 이전까지 작성한 return 이하를 복사해서 class를만들고 render안에 리턴값을 붙여넣는다. 그리고 data를 상속받는 형태로 바꿔준다. 그리고 onUpdate라는 함수를 App.js에서부터 받아올것이다. handleUpdate 함수를 만들고 자식 component를 전달한다. setState는 data(information)에 있는 값들의 id와 같으면 새로운 객체에 기존 데이터 ...list(information) 값에 ...data(phonelist에서 받아오는) 값을 덮어 씌운다... 2020. 8. 8. React - Phone book 만들기(5) 지금까지 구현한 것들을 도식화하면 다음과 같다. 그러면 추가하는 data를 출력을 했으면, 추가를 하는 것을 구현을 하면된다. App.js에서 handleCreate 함수에서 매개변수로 받은 data를 state에 추가를 하면된다. 여기서 handleCreate에 이전에 데이터들을 받아온다. 그 이유는 React는 새로 생성 되거나 변경사항이 있으면 렌딩이 다시 되기 때문에 기존의 데이터에는 영향을 주면 안된다. 아직 간단한 예제라서 잘 이해는 안되지만... 그렇기 때문에 Javascript에서 주로 사용했던 push, pop 같은 mutable한 방식대신에 immutable한 concat, slice 같은 메소드들을 사용해야 한다. React App을 확인해보면...그리고 여기서 부터는 console도.. 2020. 8. 7. React - Phone book 만들기 (4) 조금 더 동적인 웹으로 만들기 위해 이벤트 핸들을 한다. React App에 있는 input을 입력하는 것을 바로바로 출력할 수 있도록 먼저 작성해본다. 먼저, 입력되는 값을 저장할 수 있도록 state를 만들고 handleChange라는 함수를 만들었다. handleChange 함수는 state 값을 바꿔주는 함수이다. 즉, input에서 들어오는 값을 state에 저장하는 함수. 그리고 input에 이벤트를 넣어준다. React에서 이벤트는 주로 onClick 이라든지 onChange 든지 이렇게 사용한다. 이전 javascript로 DOM을 조작할 때는 소문자(onclick, onchange)로만 작성 했지만, React는 camel 표기로 사용한다. 입력된 값을 출력할수 있도록 render에 {t.. 2020. 8. 7. 이전 1 ··· 17 18 19 20 21 22 23 ··· 36 다음 반응형
