React 제어 컴포너트와 비제어 컴포넌트

react-hook-form을 왜 써야 할까에 대해 찾아보며 공부하다 들어보았던 제어 컴포넌트와 비제어 컴포넌트라는

키워드를 찾아 정리해 보기로 했다.

리액트 공식 링크:

https://ko.legacy.reactjs.org/docs/forms.html#controlled-components

폼 – React

예시로 다음과 같이 input에서 사용자가 텍스트를 입력 시 setName함수가 사용되는 것을 볼 수 있다.

input을 렌더링 하는 React 컴포넌트는 사용자의 입력값을 제어하게 되므로
해당 컴포넌트는 제어 컴포넌트가 되는 것 같다!

export const CreateGroup = () => {

    const [name, setName] = useState('');

   

    return (

        <div>  

            <input type="text"  value={name} onChange={(e) => setName(e.target.value)}/>

        </div>

    )

}

제어 컴포넌트의 문제점?

• 제어 컴포넌트는 입력할 때마다 렌더링을 하기 때문에, 불필요하게 리덴더링이되거나 API를 호출할 수 있다.
• 이 문제점을 해결하기 위해 쓰로틀링과 디바운싱이 있다고 한다?!
• 쓰로틀링(Throttling) : 마지막 함수가 호출된 후 일정시간이 지나기 전에 다시 호출되지 않도록 함
• 디바운싱(Debouncing): 연이어 호출되는 함수들 중 마지막(혹은 맨 처음) 함수만 호출하도록 하는 것

모던 자바스크립트 책을 스터디하면서 정리했던 쓰로틀링과 디바운싱을 제어 컴포넌트에서 활용가능하다니 흥미로웠다.

https://zoon-bloom.tistory.com/109

디바운스와 스로틀

 

비제어 컴포넌트는 

제어 컴포넌트 방식에서 사용한 setState()를 쓰지 않고 ref를 사용해서 값을 얻는다.

제어 컴포넌트의 경우 사용자가 입력을 하는 액션을 취할 때마다 리렌더링을 발생시키는 반면, 비제어 컴포넌트는 사용자가 직접 트리거하기 전까지는 리렌더링을 발생시키지도 않고 값을 동기화시키지도 않는다.

그래서 button을 통해 submit을 발생했을 때 해당 값을 동기화 화면서 렌더링 되게 된다.

 

일반적으로 모든 form 요소에서 상태의 동기화가 필요한 건 아니고, form 요소가 증가할수록 모든 컴포넌트에
쓰로틀링이나 디바운싱을 사용하기는 힘들다. 만약 값이 트리거 된 이후에만 갱신이 돼도 문제가 없다면, ref를 사용하는 방식이 불필요한 렌더링을 방지하는데 더욱 도움이 될 수 있다.
이러한 비제어 컴포넌트를 사용해 렌더링을 최적화하는 라이브러리가 react-hook-form이라고 한다~!.

 

제어 컴포넌트

• 제어 컴포넌트의 값은 항상 최신값을 유지. 새로운 입력값이 생길 때마다 상태를 새롭게 갱신. → 데이터와 UI에서 입력한 값이 항상 동기화

비제어 컴포넌트

• 필드에서 값을 트리거해야 값을 얻을 수 있음. (form에서는 submit을 해야 값이 나옴. 버튼을 클릭해 트리거하기 전까지의 값은 변경되지 않음)

 

참고 사이트 : https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/

https://itprogramming119.tistory.com/entry/React-%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-VS-%EB%B9%84%EC%A0%9C%EC%96%B4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

https://velog.io/@yukyung/React-%EC% A0% 9C% EC%96% B4-%EC% BB% B4% ED% 8F% AC% EB%84% 8C% ED% 8A% B8% EC%99%80-%EB% B9%84% EC% A0% 9C% EC%96% B4-%EC% BB% B4% ED% 8F% AC% EB%84% 8C% ED% 8A% B8% EC% 9D%98-%EC% B0% A8% EC% 9D% B4% EC% A0%90-%ED%86% BA% EC%95%84% EB% B3% B4% EA% B8% B0