React-hook-form의 동작원리를 찾아 보다가 비제어 컴포넌트라는 개념을 활용한 라이브러리라는 것을 알게 되었고, 이 글은 비제어 컴포넌트에 대해서 정리한 글입니다.
React setState vs React-hook-form setValue
useState의 setState를 사용하여 React의 상태값을 변경하면 재렌더링이 일어나게 된다.
하지만, React-hook-form의 setValue를 사용해서 상태값을 변경하면 불필요한 렌더링을 피할 수 있다.
useState의 setState를 사용하여 상태값을 변경하고 변경된 값을 확인하려고 console에 바로 찍어보면 변경된 값이 바로 확인되지 않는다. setState는 비동기로 동작하기 때문이다.
하지만, React-hook-form의 setValue를 사용하면 console에서 변경된 값을 바로 확인 가능하다.
제어 컴포넌트
React에 의해서 값이 제어되는 컴포넌트를 말한다.
우리가 자주 사용하는 useState를 사용해서 DOM 요소의 값을 관리하면 제어 컴포넌트이다.
const App = () => [
const [value, setValue] = useState("");
const onChange = (e) => {
setValue(e.currentTarget.value);
}
return <input value = {value} onChange={onChange} />
}아주 익숙한 코드일 것이다.
input의 값이 바뀌면 State의 값이 업데이트가 된다.
React의 State에 의해서 input의 value가 결정되는데, 이것을 Single Source of Truth라고 한다.
단점
제어 컴포넌트를 State를 사용하기 때문에 불필요한 리렌더링이나, API를 호출할 수 있다.
이것을 해결하기 위해서 쓰로틀링(Throttling)과 디바운싱(Debouncing)이 있다.
언제 사용하면 좋을까?
입력 받은 값을 바로바로 유효성 검사를 해야하는 경우 사용하거나,
실시간으로 인풋 값을 검사해야 하는 경우, 마지막으로 조건에 따라 버튼이 활성화 되야 하는 경우가 있다.
비제어 컴포넌트
React에서 값을 보장하지 않는 방식을 말한다.
useRef를 사용해서 값을 관리하는 방식을 비제어 컴포넌트라고 한다.
const App = () => {
const inputRef = useRef(null);
return <input ref={inputRef} />
}State로 값을 관리하지 않기 때문에 입력할 때마다 리렌더링, API가 호출되지 않아서 성능상 이점이 있다.
그리고 특정한 작업을 해야한다면, ref를 통해서 접근해 value를 얻을 수 있다.
