데브허브 | DEVHUB | Two-Way From Binding - React Coding Interview QuestionTwo-Way From Binding - React Coding Interview Question
- React의 양방향 폼 바인딩(Two-Way Form Binding)은 고전적인 코딩 인터뷰 질문으로, 입력 요소와 텍스트 디스플레이를 로컬 React 상태를 통해 완벽하게 동기화하는 방법을 다룹니다. 🔄
- 요구 사항은 빈 문자열로 시작하고, 모든 키 입력이 즉시
data-test-id="echo-display"를 가진 P 태그에 나타나야 하며, 입력은 반드시 '제어(controlled)'되어야 합니다. 📝
- 초기 상태에서는 입력 필드에 텍스트가 나타나지만, 아래 P 태그에는 반영되지 않아 '제어되지 않는(uncontrolled)' 컴포넌트의 한계를 보여줍니다. 🚫
- 해결책은
useState 훅을 사용하여 입력 필드의 현재 값을 저장할 상태 변수(text)와 이를 업데이트할 함수(setText)를 선언하고, 초기값을 빈 문자열로 설정하는 것입니다. 💡
<input> 요소의 value 속성을 text 상태 변수에 바인딩하고, onChange 이벤트 핸들러를 추가하여 e.target.value로 setText 함수를 호출함으로써 입력 필드를 '제어(controlled)' 컴포넌트로 만듭니다. ⌨️- P 태그(
data-test-id="echo-display") 내부에 text 상태 변수를 직접 렌더링하여, 입력 필드의 변경 사항이 실시간으로 디스플레이에 반영되도록 합니다. 📺
- 이 문제는 React의 상태 관리, 폼 바인딩의 기본 원리, 그리고 제어되는(controlled) 컴포넌트와 제어되지 않는(uncontrolled) 컴포넌트의 차이점을 이해하는 데 중요합니다. ✅
