설명

성향 테스트를 직접 만들 수 있는 페이지입니다. 테스트 유형은 점수, MBTI, O X 유형이 있습니다.

객체 형태로 테스트 유형은 key 값 value 테스트 step

react-hook-form를 사용한 form 데이터 관리

사용 이유

성향 테스트를 만들 때 form을 작성해야 하는 프로젝트의 많은 부분이 있었습니다. 기존에는 redux를 사용하여 상태관리를 하고 있었습니다. 프로젝트 특성상 input tage를 많이 작성 해야 하는데, 작성하는 과정에서 불필요한 리렌더링이 발생하는 것을 발견했습니다. 해당 문제를 해결하기 위해 ‘react-hook-form’을 사용하게 되었습니다.

react-hook-form 사용 이점

yup 라이브러리와 연계되어 사용가능하여 유효성 체크가 쉽습니다.

비제어 컴포넌트방식임에도 데이터는 동기화되며 분산되지 않아 데이터를 한 곳에서 관리 할 수 있습니다.(원래 비제어 컴포넌트방식은 데이터가 비동기화됨)

FormProvider에 감싸진 컴포넌트 내에서는 form의 데이터를 어디에서든지 다룰 수 있어 props drilling 문제를 해결할 수 있습니다.

비제어 컴포넌트 방식이므로 불필요한 리렌더링을 방지할 수 있다.

흐름

step은 기본정보, 선택지 작성, 결과지 작성, 최종 확인 스텝이 있습니다.

각각의 스텝은 각각의 FormProvider 아래로 데이터를 관리합니다.