TIL: 2023-06-11 제어, 비제어 컴포넌트

⚙️ 오늘 학습한 내용

제어, 비제어 컴포넌트

🗝 키워드

제어 컴포넌트, 비제어 컴포넌트, ref

🗣 스스로에게 설명

제어 컴포넌트와 비제어 컴포넌트는 CDD에서 중요한 개념이다.
push와 pull로 두 형식의 차이를 이해하면 조금 쉬워진다.

제어 컴포넌트

push & Single source of truth

제어 컴포넌트는 값이 완전히 제어되는 컴포넌트이다.
input의 값을 상태에 저장해두고 onChange 속성에 핸들러를 넣어 값의 변경을 감지하는 방식이다.
값이 변경될 때마다 핸들러가 동작하며 state에 바뀐 값을 업데이트하고 리렌더링이 발생한다.
값의 변경을 form에 push한다고 이해하면 된다
input의 값은 상태에 저장되어 항상 최신 상태로 유지된다.
따라서 input 값에 따라 버튼의 활성화를 결정하거나 바로바로 유효성 검사를 할 때 제어 컴포넌트 방식이 적절하다.

비제어 컴포넌트

pull & get State

비제어 컴포넌트는 내가 필요할 때만 ref로 값을 pull해와서 쓰는 방식이다.
예를 들어 폼을 제출하는 그 순간에만 값을 가져와서 서버에 보내는 게 있다.
비제어 컴포넌트는 아주 간단한 폼을 작성할 때 사용할 수 있다.
값이 필요할 때 DOM을 직접 조작해서 가져와야 하기 때문이다.
따라서 입력값에 따라 버튼을 활성화하는 경우나 입력값의 즉각적인 유효성 검사에는 부적절하다. (값의 변경을 수시로 검사해야 하기 때문)

 

 

아래 레퍼런스 블로그를 참고해가며 직접 예제를 만들어 연습해보았다.

input 값을 관리하는 방식으로 제어 컴포넌트를 자주 써왔어서 비제어 컴포넌트는 이게 맞는지 잘 확신이 서지 않는다.
피드백 환영합니다,,

 

참고

Controlled vs. uncontrolled components in React - LogRocket Blog

https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/