[FEAT] 호스트 페이지 렌더링 최적화

[jsk3342]

🚀 Issue Number

• resolve: [FEAT] 인풋 렌더링을 최적화 한다. #123
• resolve: [FEAT] 태그 컴포넌트 분리 및 입력 후 엔터 입력 시 벳지로 변경된다. #125

📝 주요 작업

1. React Hook Form 도입

• 기존 useState로 관리되던 폼 상태를 React Hook Form으로 마이그레이션
• FormProvider를 사용하여 폼 컨텍스트 관리 구조화
• 각 필드를 개별 컴포넌트로 분리하여 재사용성 향상

2. 성능 최적화

• Uncontrolled 컴포넌트 패턴 적용으로 불필요한 리렌더링 방지
• 필드별 상태 격리로 독립적인 업데이트 구현

고민과 해결 과정

as-is

// ... 각 필드마다 개별 상태 관리
const [liveTitle, setLiveTitle] = useState('');
const [category, setCategory] = useState('');

• 모든 입력 필드가 상태 변경시마다 리렌더링 발생
• 불필요한 상태 업데이트로 인한 성능 저하

to-be

const methods = useForm<FormValues>({
  defaultValues: {
    liveTitle: '',
    category: '',
    tag: '',
    tags: [],
    notice: '',
    previewImage: null
  }
});

• 변경된 필드만 선택적으로 리렌더링
• React Hook Form의 Controller 컴포넌트를 통한 효율적인 상태 관리

[spearStr]

type폴더에 추가하지 않고 Form폴더 안에서 type을 지정하신 것은 여기서만 사용해서 그런걸까요? + 폴더간 물리적 거리가 멀어서 그런걸까요?

[jsk3342]

api에서도 동일 타입을 사용하고 있어서 분리하는게 좋아보이네요 :)

[spearStr]

긴 내용의 style코드를 분리한 것이 좋습니다!

[spearStr]

FormProvider로 useFormContext를 사용한것이 인상적입니다!!
그런데 계층이 한단계인데 context를 사용한 이유가 있을까요?

[spearStr]

setValue가 2개인데 의도한 것인가요?

[jsk3342]

tag, tags가 있는데 tag에서 엔터를 치면 tags 배열에 들어가고 tag는 다른 인풋을 받기 위해 빈스트링으로 설정합니다.

[spearStr]

react-hook-form 라이브러리를 사용하여 효율적으로 form관리를 한 것이 인상깊었습니다!