이벤트 핸들러 등록
<label for="name">이름</label>
<input id="name" name="name" value={name} onChange={handleNameChange} />리액트는 단방향이기 때문에 코드 상 변화한 것은 화면에 띄울 수는 있지만, 화면 상에서 변화한 것을 코드로 담아오진 못한다. 따라서 이벤트 핸들러를 등록해 동작하도록 해야한다.
만약 input이 변하면 함수가 실행되도록 이벤트 핸들러를 등록한다.
그 함수 안에서 상태 변경을 통해 상태가 변화하도록 한다.
const [name, setName] = useState("");
const handleNameChange = (event) => {
setName(event.target.value); // 사용자가 입력한 name 저장
};💡 리액트의 단방향 데이터 흐름과 이벤트 핸들러의 필요성
리액트는 단방향 데이터 흐름을 가진 프레임워크이다. 즉, 데이터가 부모 컴포넌트에서 자식 컴포넌트로 한 방향으로만 전달된다. 이로 인해 컴포넌트 내부 상태를 제어하거나, 사용자 인터페이스 (UI)의 변경 사항을 코드로 다시 가져오려면 특별한 처리가 필요하다.
문제 : 화면 상의 변화를 코드에 반영하지 못함
리액트에서 단순히 input의 value 속성에 상태 값을 전달하면 해당 상태 값은 화면에 표시되지만, 사용자가 input 필드에 새로운 값을 입력해도 상태가 자동으로 업데이트되지 않는다. 상태는 코드에서만 유지되기 때문에, 사용자 입력을 코드에 반영하려면 이벤트 핸들러가 필요하다.
해결 방법 : 이벤트 핸들러 등록
사용자가 input 필드에 값을 입력하면, 입력값을 읽어와 리액트의 상태로 업데이터하는 이벤트 핸들러를 등록한다. 이를 통해 화면 상의 변화 (사용자 입력)를 코드로 반영할 수 있다.
구현 과정
- 상태 선언
입력값을 저장할 상태를 useState로 정의한다. 이 상태는 리액트 컴포넌트 내부에서 입력값을 유지하며, 상태가 변경되면 컴포넌트는 리렌더링된다.
const [name, setName] = useState(""); // 'name' 상태와 이를 업데이트하는 'setName' 함수
- 이벤트 핸들러 작성
사용자가 input에 값을 입력할 때 실행될 함수를 정의한다. 이 함수는 이벤트 객체(event)에서 사용자가 입력한 값(event.target.value)을 읽어 상태를 업데이트한다.
const handleNameChange = (event) => {
setName(event.target.value); // 사용자가 입력한 값을 상태에 저장
};
input요소에 이벤트 핸들러 연결
input 요소의 onChange 속성에 작성한 이벤트 핸들러를 연결한다. 이로 인해 input의 값이 변경될 때마다 handleNameChange 함수가 실행된다.
<input id="name" name="name" value={name} onChange={handleNameChange} />
- 상태와 UI의 동기화
value속성에 상태값을 연결하면, 상태가 변경될 때input의 값도 자동으로 업데이트된다.- 사용자가 입력한 값은 이벤트 핸들러를 통해 상태에 저장되고, 컴포넌트가 리렌더링되면서 새로운 값이 화면에 반영된다.
왜 이벤트 핸들러가 필요할까?
리액트는 단방향 데이터 흐름을 기반으로 하기 때문에 상태를 직접 변경하거나, 화면 상의 변화를 코드에 반영하기 위한 특별한 매커니즘이 필요하다. 이를 해결하기 위해 제어 컴포넌트 개념이 도입되었다.
제어 컴포넌트는 입력값의 소스를 상태로 정의하며, 입력값을 제어하기 위해 이벤트 핸들러를 사용한다.
