제어 컴포넌트

• 구 가이드 : https://ko.legacy.reactjs.org/docs/forms.html#controlled-components

요약

이 문서는 React의 폼 엘리먼트 사용에 대한 설명을 제공하며 제어 컴포넌트를 활용한 방법을 소개합니다.

사실

- 사용자가 폼을 제출하면 새로운 페이지로 이동하는 기본 HTML 폼 동작을 수행한다. 하지만 React에서는 JS 함수로 폼의 제출을 제어하고 싶어하는데, 이것을 제어 컴포넌트라고 부른다.

• 📝 <input>, <textarea>, <select> 엘리먼트 모두 value 어트리뷰트와 React state를 연동하여 신뢰가능한 단일출처로 React state를 둔다. 제어컴포넌트로 사용하면 input의 값은 항상 React state에 의해 결정된다.
• 📝 <textarea> 엘리먼트는 value 어트리뷰트를 사용하여 제어하며, 여러 줄의 텍스트 입력에 사용됩니다.
• <input type="file">의 값은 읽기전용이기 때문에 React에서는 항상 비제어컴포넌트이다.
• 📝 여러 개의 입력 엘리먼트를 제어할 때는 name 어트리뷰트를 활용하여 event.target.name을 통해 어떤 입력을 처리할지 선택할 수 있습니다.
• 제어 컴포넌트는 코드작성이 많아진다. 따라서 제어 컴포넌트 대신 비제어 컴포넌트를 사용하는 대안도 소개되며, Formik 등의 라이브러리를 활용하는 방법도 언급됩니다.

비제어 컴포넌트

대부분은 제어 컴포넌트를 사용하는 것이 좋지만, 빠르게 코드를 작성해야하는 경우에는 비제어 컴포넌트를 사용할 수 있다.

• 비제어 컴포넌트는 DOM에 신뢰가능한 출처를 유지한다.
• React 렌더링 생명주기에서 폼 엘리먼트의 value 속성은 DOM의 value를 대체한다. 비제어 컴포넌트를 사용하면 React 초깃값을 지정하지만 그 이후의 업데이트는 제어하지 않는 것이 좋다. 이럴때는 defaultValue를 사용할 수 있다. 컴포넌트가 마운트 된 후에 defaultValue를 변경해도 DOM의 값이 업데이트되진 않는다.