230109_TIL

오늘 공부한 내용

• 항해 99 실전프로젝트 11일차

• 식물검색 메인페이지 틀 완성 및 반응형 구현
• 식물 검색 전체리스트 불러오기, 필터링하기, 검색하기 기능 구현 완료(뷰에 전달 x)

어려웠던 내용

 

트러블 슈팅

상황: 검색 페이지에 필터링 기능을 넣기전 클릭한 것의 네임이 어떤 것인지 값을 들고오려고 시도 중인 상황

시도: 클릭했을 때 버튼의 클릭한 버튼의 값을 가져와서 useState에 상태값을 저장하려고 함, 그리고 useState에 담긴 네임을 axios에 넣어 백엔드로 전송하려고 시도

문제: 버튼을 클릭할때마다 렌더링이 한번에 4번씩 일어남(버튼에 하나의 state값을 공유했기 때문)

 

해결방법 : 필터링하는 버튼을 컴포넌트화 시킨 후 state 값을 상위컴포넌트에서 만들어 하위컴포넌트(필터링버튼) props로 전달하는 방식으로 변경. 하위컴포넌트에서 state값을 상위 컴포넌트로 전달하고 변경시 모든 하위컴포넌트(필터링버튼)에 state값을 전달하여 값을 바꿔줌.

useState는 같은 값이면 변경된 값이 없다고 판단하여 페이지를 리렌더링 하지 않기때문에, 다른 컴포넌트에서 클릭했을 때 그 값을 상위컴포넌트로 전달하여 페이지를 리렌더링 시킨 후 바뀐 상태값을 다시 하위컴포넌트로 전달하여 다른 버튼 컴포넌트의 값을 초기화시키려 의도함.

 

 

 

느낀점

내가 맡은 부분들을 하나씩 해나가면서 보람과 자신감이 늘어가고 있는 실정이다. 처음과 다르게 조원분들과도 친해길 계기가 되어 편한 분위기와 재밌는 소통으로 협업을 할 수 있어 다행인 것 같다. 처음에는 불가능 해보였던 기능들이지만 사실 해보면 별 것 아닌 기능들이 많았고 처음부터 프론트엔드의 스코프가 크다는 소리에 지레짐작 겁을 먹었다는 것을 깨달았을 땐, 이미 코드 작업하는 그 순간을 즐기고 있는 나를 발견할 수 있었다. 

처음부터 그랬던 것 같다. 다행스럽게도 코딩을 하는 직업군이 나의 흥미와 적성에 맞다는 사실을 확인하는 순간 느껴지는 그 안도감과 행복함을 지금도 느끼고 있다. 

앞으로 얼마나 이 행복이 지속되고 내 성장을 도모할 수 있을지는 모르겠지만, 지금 이 순간을 즐기며 프로젝트 작업에 몰두해보도록 하자.

내일 할 일

• 식물검색 디테일 페이지는 디자인이 나온 후 해보자.
• 식집사 가이드페이지 틀 및 기능 구현