검색창 input값을 관리하는 방법 (feat. ref, useState)

제어 컴포넌트로 관리 - useState

• 인풋값에 대한 validation이 필요할때 활용

const [text, setText] = useState("");

<input
  onChange={(e) => setText(e.target.value)}
  value={text}
 />

비제어 컴포넌트로 관리 - useRef

const inputRef = useRef(null);

const searchHandler = (e) => 
	~~
    ~~
    inputRef.current.value = "";
  }
};

<input
  onKeyDown={searchHandler}
  ref={inputRef}
/>