문제해결과정
모달 input값이 상태가 바뀔때마다 새로만들어져 focus가 풀림
modal/content 컴포넌트 따로 분리하여 해결 ⇒ 컴포넌트 단위기준을 잘 생각해서 나누자
헤더 로그인 /비로그인 / pc/ 모바일 반응형
로그인 / 비로그인 모바일/ 피시 4분기 나누어 처리⇒MarkUp이 늘었다..
로그인 후 사용자 정보 저장방법
storage 훅을 구현하여 저장하고 꺼내게 함 ⇒ 로그인유지 및 훅으로 구현
로그인 후 새로고침 사용자 정보 깨짐
App에서 prop으로 헤더컴포넌트에 넘겨주지 않고, 헤더 자체에서 mounted 될시에 데이터 넘겨줘서 해결 ⇒ 상태관리의 중요성
느낀점
기본기의 중요성
리액트를 처음사용해 보는데, 공부하면서 사용하다 보니 어떻게 돌아가는지 모르고 가져다 쓰는 경우가 많았다. 상태관리가 제대로 되지않아 코드가 더러워지는 경우가 발생. 기본기를 제대로 익히고 프로젝트에 들어갔다면 좋았을듯
상태관리의 어려움
로그인시 헤더에 App에서 prop으로 islogin을 넘겨주어 로그인 유무를 확인하였으나 세션스토리지의 set, getItem 만으로는 상태변화를 리액트가 감지하지 못하여 router.push(0)처리로 억지로 해당 페이지로 이동후 갱신시켜줌. 사용자가 보기엔 새로고침이 되진않으나, 코드상으론 별로 좋지 않아보임.
구현 vs 양질의코드
시간이 정해져있는 프로젝트이고, 처음접하는 라이브러리다보니 시간에 쫓겨 개발을 하니 구현만을 위해 코드가 더러워 지는 경우가 많았다. 깔끔하고 가독성 높은 컴팩트한 코드를 처음부터 생각하면 좋겠지만, 아직 기본기가 부족해서 인지 마음에 쫓기다 보면 1차원적으로 생각하고 코드도 더러워 지는 것 같다. 지금은 팀원의 코드리뷰를 통해 리팩토링을 병행하지만, 계속 이렇게 진행 할 수는 없으니 많이 해보면서 실력을 늘리는 것 만이 정답이다.