리액트 전화번호부 작업 후기

📋 작업 진행 내용

✔ userinput

1. input에 onChange 함수를 이용해 인풋값 가져오기
   - setstate를 이용해 변경된 값 저장
2. form태그를 이용, onSubmit 함수를 이용해 저장된 input값 전달하기
   - props에 onCreate함수를 전달해서 저장된 input값 가져오기
3. concat 함수를 이용해 전달받은 input값 배열에 추가해주기(concat함수이용)
4. 변경된 배열 맵핑하여 화면에 보여주기

✔ list 삭제

1. onRemove함수 설정후 list 컴포넌트로 전달
   - filter를 이용해 파라미터로 받아온 id값과 일치하는 값 제거
2. list 컴포넌트에서 버튼에 onClick함수 설정
   - props로 받아온 onRemove함수에 info.id를 파라미터로 넣어 실행

✔ list 수정

1. itemUpdate함수 설정 후 list 컴포넌트로 전달
   - map을 활용해 파라미터로 받아온 id와 일치할 때, 받아온 data로 덮어쓰기
2. list컴포넌트에서 수정버튼 토글기능 추가, input창 xml 레이아웃 추가, 수정된 input 넣을 state 생성
   - componentDidUpdate API 활용해서 수정버튼 on 되는순간 input 창 보여지도록 설정
   - 수정버튼 off 되는 순간 onUpdate함수에 info.id, 수정된 state 값 전달

✔ 검색어 필터링

1. state에 keyword 추가
2. input에 onChange 함수 추가하여 keyword에 value값 넣기
3. information 배열에 filter, indexOf를 활용하여 keyword와 일치하는 값만 새로운 배열에 담아주기
4. ListBox data값으로 새로운 배열 전달
5. shouldComponentUpdate API 활용해서 list 값이 변경될때만 리렌더링 되도록 설정

👩 리액트에 대한 기초지식이 부족한 것 같아 고민이었는데 멘토님이 올려주신 학습가이드를 참고해서 리액트 강의를 듣게 됐다. 리액트 관련 문법들을 배우고 마지막엔 전화번호부 만드는 실습과제가 이어졌다. 확실히 기초문법을 쭉 훑고 난 뒤라 그런지 어떻게 구현하면될지 그림이 그려졌다. 하지만 막상 코드를 짜다보니 막히는 부분이 많아서 제대로 완성은 할 수 없었다.. 다시 강의를 보면서 강사님이 어떻게 진행하시는지 적어두고 다시 만들어보았다. 처음엔 익숙치않아 어려웠지만 알고나니 간단하게 짤 수 있는 코드라는걸 알게됐다.

👩 뭐든지 처음에 익숙치않을땐 어렵고 막막한 것 같다. 배움과 경험이 왜 중요한지 새삼 깨달았던 시간이다. 처음엔 어떻게 구현해야할지 몰라 강의에서 사용된 함수들까지 하나하나 메모해두고 보면서 만들어야했었는데 3번을 다시 만들어보니 이젠 자신감까지 생겼다. 너무 쉽게 자만하는걸까?..ㅎㅎ
이건 정말 기초적인 기능들만 사용한거라 아직 배워야할 것들이 너무 많지만 조급해하지말고 하루하루 배워가는 기쁨을 누리자.