[0524] Input의 제어권

오늘도 역시 cashbook 과제 만들기 킵고잉~ 했다

과제 필수 요구사항에 Input을 Ref로 구현하라고 되어있었다.
나는 항상 Input의 값을 state로만 관리했었기 때문에 이게 무슨말이지...🥺 했었는데
value 값을 ref로 관리하라는 말이었다

제어 컴포넌트

React에 제어권이 있는 컴포넌트. state를 이용하여 값을 관리하고 업데이트하는 것이다. (업데이트될 때마다 렌더링)

비제어 컴포넌트

기존 html input의 자체 로직에 의해 동작하는 컴포넌트. ref를 이용하여 값을 읽고 쓸 수 있다.

실시간으로 값에 대한 처리를 해줘야 할 때는 제어 컴포넌트, (ex. 실시간 유효성 검사, 조건부 제출 버튼 비활성화, ...)
그것이 아니고 특정 이벤트 시에만 값이 필요하다면 불필요한 렌더링이 발생하지 않는 비제어 컴포넌트를 사용하는 것이 좋다.