Warning: Prop id did not match. 오류 해결

[spolice0324]

Description

• DropdownField 컴포넌트 구현 #20 의 dropdown field 완성하고 test 페이지에서 테스트 해보던 도중 최초 렌더링시 발생하는 오류

react-select 라이브러리 자체적으로 SSR 대응에 문제가 있었다.
검색해본 결과 id를 직접 부여해서 해결해야한다는 해결책들을 찾을 수 있었다.
(SSR과 클라이언트 측 하이드레이션 -> id 동기화 유지를 위한 고유 id를 부여)

• instanceId, Id, inputId 등.. 세개 중에 두개가 필요하다, 세개 모두 필요하다 등 의견들이 많았는데
  저 같은 경우는 React 18에서 제공해주는 UseId를 통해 받아온 값을 instanceId로 부여해주었더니 해결할 수 있었습니다.

Caution notice

• 참고로, loadsh에 uniqueId 사용해서 useEffect로 ssr 이후 값을 넣어보는 방식으루 해보라는 의견에 따라서 했을때는 ... Select내에 uniqueId를 instanceId로 받아오는 과정에서

export default DropdownField
이 코드에 대해서 '{ name: string; control: Control; instanceId: string | null; render: ({ field: { onChange, value, ref } }: { field: ControllerRenderProps<any, string>; fieldState: ControllerFieldState; formState: UseFormStateReturn<...>; }) => Element; }' 형식은 'IntrinsicAttributes & { render: ({ field, fieldState, formState, }: { field: ControllerRenderProps<any, string>; fieldState: ControllerFieldState; formState: UseFormStateReturn<...>; }) => ReactElement<...>; } & UseControllerProps<...>' 형식에 할당할 수 없습니다.

란 오류가 계속 발생해서 control의 타입을 바꾸는 등의 시도를 해보았는데 해결하지 못했습니담... 일단 useID로 성공했지만 이 방법으로도 해결이 가능한지는 잘 모르겠네요 🤔

• 해결에 참고해본 링크

  • React 18 에 대한 정보
  • https://tech.kakaopay.com/post/react-server-components/