[React] 📚 폼과 이벤트 처리하기

📋 기억하고 싶은 내용

• React state를 "신뢰 가능한 단일 출처(single source of truth)"로 만들어 두 요소로 결합할 수 있는데, 이러한 방식으로 Reac에 의해 값이 제어되는 입력 폼 엘리먼트를 "제어 컴포넌트(controlled component)"라고 한다.
• 전반적으로 <input type="text">, <textarea> 및 <select> 모두 매우 비슷하게 동작한다. 모두 제어 컴포넌트를 구현하는데 value 어트리뷰트를 허용한다.
• 여러 input 엘리먼트를 제어해야할 때, 각 엘리먼트에 name 어트리뷰트를 추가하고 event.target.name 값을 통해 핸들러가 어떤 작업을 할 지 선택할 수 있게 해준다.
• 주어진 input 태그의 name에 일치하는 state를 업데이트하기 위해 ES6의 computed property name 구문을 사용하고 있다.
• 대부분 경우에 폼을 구현하는데 제어 컴포넌트를 사용하는 것이 좋다.
• 모든 state 업데이트에 대한 이벤트 핸들러를 작성하는 대신 비제어 컴포넌트를 만들려면 ref를 사용하여 DOM에서 폼 값을 가져올 수 있다.
• Ref의 바람직한 사용 사례는 다음과 같다.
  • 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
  • 애니메이션을 직접적으로 실행시킬 때.
  • 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.
• 선언적으로 해결될 수 있는 문제에서는 ref 사용을 지양해야 한다.
• 함수 컴포넌트에서 부모 컴포넌트가 자식 컴포넌트의 ref를 제어하기 위해서는 ref forwarding을 사용해야 한다.
• useRef는 .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환한다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다.
• useRef로 만든 가변값은 값이 변경되어도 리렌더링을 발생시키지 않는다.
• React가 DOM 노드에 ref를 attach하거나 detach할 때 어떤 코드를 실행하고 싶다면 대신 콜백 ref를 사용해야 한다.
• 콜백 ref를 사용하면 자식 컴포넌트가 나중에 측정된 노드를 표시하더라도 (예: 클릭에 대한 응답으로) 여전히 부모 컴포넌트에서 이에 대한 알림을 받고 측정을 업데이트 할 수 있다.

🔗 참고 래퍼런스

• <input>: 입력 요소 - MDN
• 폼 - React Doc
• 비제어 컴포넌트 - React Doc
• Ref와 DOM - React Doc
• Forwarding Refs - React Doc
• useRef - React Doc
• 인스턴스 변수와 같은 것이 있습니까? - React Doc
• Key - React Doc