241102 팀 프로젝트 집밥도감 12 - 트러블슈팅

https://shape-coding.tistory.com/entry/TypeScript-ReactFC%EC%97%90-%EC%82%AC%EC%9A%A9%EC%97%90-%EB%8C%80%ED%95%B4-%EC%83%9D%EA%B0%81%ED%95%B4%EB%B3%B4%EA%B8%B0

FC 지양

https://velog.io/@ddaisylee/react-hook-form-%EC%97%90%EB%9F%AC-%ED%95%B4%EA%B2%B0-%EA%B3%BC%EC%A0%95feat.-Ref%EC%99%80-%EB%B9%84%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8#-ref-%EA%B4%80%EB%A0%A8-%EC%97%90%EB%9F%AC
ref에러

https://github.com/orgs/supabase/discussions/2284

훅폼&ref
https://www.react-hook-form.com/faqs/#Howtosharerefusage
https://velog.io/@rkd028/React-Hook-Form-useRef-%EC%97%B0%EA%B2%B0%ED%95%98%EC%97%AC-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
https://stackoverflow.com/questions/71495923/how-to-use-the-ref-with-the-react-hook-form-react-library

훅폼의모든것
https://velog.io/@leitmotif/Hook-Form%EC%9C%BC%EB%A1%9C-%EC%83%81%ED%83%9C-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0

그게뭔데

리액트 훅 폼에서 ref를 쓰기 위해 공식문서에서 본 것 처럼 따라해봤지만 register가 없다고 뜬다.

하지만 이미 나는 컴포넌트 분리 때문에 methods를 통해 register를 가져오고 있었고,
사용할 때도 methods.register으로 쓰고 있었다.

요런식으로 적어주니 일단 register를 못 찾는 문제는 해결되었다.

하지만 여전히 폼에서는 ref 관련해서 에러가 난다.

요렇게 해주니 정상적으로 작동

React-hook-form을 쓰던 중, ref를 써야할 일이 생겨서 ref를 썼으나 ‘ref가 두 번 이상 지정되어 이 사용량을 덮어씁니다.’ 라는 에러가 발생했다. React-hook-form 에서는 register 내에서 자체적으로 ref 기능을 제공하고 있었기 때문에 ref를 register 밖에 따로 작성하면 발생하는 에러였다. (*참고 : https://react-hook-form.com/docs/useform/register)

ref를 사용하기 위해 register 내에 넣어주었으나, register를 사용하고 있음에도 ‘register를 찾을 수 없다’는 에러가 발생했다. React-hook-form을 컴포넌트로 분리하면서 useFormContext 를 사용했고 이 과정에서 register를 method를 통해 불러오며 발생한 에러였다. (*참고 : https://react-hook-form.com/docs/useformcontext)

const {ref, …rest} = register(”recipeDoneImg”) 형식으로 쓰던 것을
const {ref, …rest} = methods.register(”recipeDoneImg”) 로 바꿔서 써줬더니 에러가 해결되었다.