폼 최적화는 어떻게 해야할까

• custom hook으로 input field를 재사용화를 한다면
  • 인풋을 관리하기 편해진다

  • • DOM을 직접 참조하여 조작하지 않고, 리액트 상태로 관리

      •   import { useState } from "react";
          
          export const useInput = initialValue => {
          	const [value, setValue] = useState(initialValue);
          	
          	return [
          	{ value, onChange: e => setValue(e.target.value)},
          	() => setValue(initialValue);
          	]
          };

    Link to original

• 하지만 각 자식에게 상태를 책임지면 트레이드 오프 발생

  • • 상태를 부모가 가지면, 자식 컴포넌트 전체가 리렌더, 그렇다고 각 자식에게 상태를 보유하게하면 부모가 상태를 알 수 없는 문제
      • → 트레이드 오프

    Link to original

• 최적화 방법
  • 단순한 입력은 부모가 관리
  • 복잡하거나 느린 입력
    • UseDebounce로 느리게 부모에게 전달
  • ref나 callback 으로 자식으로부터 값(상태) 가져오기