TIL_230214_ 최종 프로젝트 - MVP 기능 개발 - 검색 기능 구현, 지도 API 공부

내일배움캠프 4기 스파르타코딩 React B반

---

📒 오늘의 공부

1. 프로젝트 기능 개발

문제

• input 오류
  • Warning: A component is changing an uncontrolled input to be controlled

시도 및 해결

• input에 연결된 useState
  const [keyword, setKeyword] = useState<string>();

  • useState<string>('') 괄호안에 스트링 표시를 해주니 해결

    ---

• 구현한 페이지 컴포넌트 분리
  • Header에서 검색창 컴포넌트 분리
  • Main Page(index.tsx) 컴포넌트 분리
    -> 통합데이터도 Main에서 불러와 props로 넘기는 게 앙니라 Main component에서 불러오려고 했는데 SSG, SSR은 다른 컴포넌트가 아닌 page 폴더 내의 파일에서만 불러올 수 있다.

• 유효성 검사 등 UX 고려한 기능 추가

  • Alert UI 적용(Confirm Library)
  • Alert UI + Confirm UI 하나로 합쳐서 공통 컴포넌트로 쓰기

• TOP 버튼 컴포넌트 생성

• MVP 기능 구현 완료

---

2. 네이버 지도 API 공부

• api key발급까지 함

---

알게 된 것

• input에 defaultValue를 넣고 수정 시
  • 수정하지 않고 수정완료 버튼을 누르면 기존 값도 다 초기화되는 문제
  • 수정 버튼을 눌렀을 때 setData(기존 댓글)이 되게 하면 내용을 수정하지 않고 수정버튼을 눌렀을 때 빈 input값이 아닌 기존 값이 들어간다.