[BookNote][react-hook-form] Uncontrolled Booknote

[joohaem]

종류

ISSUE 종류를 선택하세요 ([ ] 안에 x 표시, [x])

• Refactor (리모델링 재개발)
• Fix (내가 해결해주지)
• Bug (삐용삐용 큰일 났어 / 질문)
• Feature (제가 해냈습니다)

해결하고자 하는 내용 (What & Why)

• 버그 해결을 위해 제거했던 react-hook-form, Uncontrolled Input 로직을 사용하기 위해 방법을 고안하였습니다.
• 저희의 긴 논의했던 내용들이 전부 필요했어요,, 저희 참 멋지게 논의한 듯 합니다. 결국에는 서버팀에게 부탁했던 작업을 저희가 하게 되네요!

해결하고자 하는 방법 (How)

현재 북노트 데이터는 Recoil state로써 제어 컴포넌트로 이루어집니다.

이의 리렌더링을 최적화하기 위해서 꼬리 질문/답변을 비제어 컴포넌트로 구성하기 위해, react-hook-form을 사용합니다. 그렇다면

1. 객체 구조의 recoil state
2. flatten 상태의 key-value 를 가진 hook-form 객체 (이는 우리가 논의 했던 Normalized 된 객체로 사용할 수 있을 듯 합니다.)

두 가지를 사용할 수 있겠죠!

우리가 이전에 구성했던 데이터 구조와 같습니다. 꼬리 질문/답변은 비제어로 관리하고, 필요할 때(저장 및 완료/ 생성 및 삭제)에만 업데이트 시켜준다.
이 떄 추가로 필요한 건 다음과 같습니다.

1. key 값을 path 가 아닌 id 값으로 관리한다.
2. 해당 객체에 content 값과 path 값을 가진다.
3. 중간 위치에 추가 할 때에 그 아래에 있는 node 들의 id 를 추적해 hook-form 객체의 path를 알맞게 업데이트한다.
4. 중간 위치를 삭제 할 때에 그 아래에 있는 node 들의 id 를 추적해 hook-form 객체의 path를 알맞게 업데이트한다.

버그를 픽스할 때, id 값들을 uuid로 모두 추가하였으니, 이게 가능해 집니다.
onAddChild, onDeleteChild 등의 비즈니스 로직에 id 값을 의존하고 이를 추적하는 로직이 추가로 필요할 것 같아요.

이 작업만 된다면 완벽하게 북노트를 비제어 컴포넌트로 관리할 수 있지 않을까 싶습니다 !!