gitul0515 commented 2 years ago

개요

ReviewEditForm에서 렌더링 성능 문제가 확인됨.

입력 필드를 하나 변경함에도 폼 전체가 리렌더링. 입력을 빠르게 하면 Frame Time이 정상 수치(16ms)를 크게 벗어남.

상태 함께두기(state colocation) 원칙을 적용하여 리렌더링을 줄임으로써 이 문제를 개선하겠음.

※ 상태 함께두기: 하위 컴포넌트에 state를 위임하여 리렌더링 범위를 좁히는 방법

폼의 구조를 아래와 같이 변경할 예정임.

작업 내용

punchdrunkard commented 2 years ago

상태 함께 두기를 이용해서 리액트 폼을 최적화하는 아티클을 예전에 읽어본 적이 있어요! 구현하시면서 도움이 되실 것 같아서 올려봅니다! https://velog.io/@superlipbalm/improve-the-performance-of-your-react-forms

gitul0515 commented 2 years ago

저도 이 글을 읽고나서 아이디어를 떠올렸답니다ㅎㅎ 공유 감사해요 :)