React에서 onChange 이벤트 사용

React의 onChange prop을 사용하면 폼 컨트롤의 변경에 컴포넌트가 응답할 수 있습니다. 핸들러는 변경된 컨트롤의 값을 읽고, 화면에 표시할 값을 제공하는 상태를 업데이트합니다. React의 onChange는 네이티브 HTML onchange 속성과 단순히 같은 것이 아닙니다. React는 폼 변경을 자체 이벤트 시스템으로 처리하며, React 컨트롤에 맞는 동작을 제공합니다.

컴포넌트가 현재 폼 값을 관리하거나, 값을 검증하거나, 인터페이스의 다른 곳에서 사용해야 한다면 제어 입력을 사용하세요. 기본 패턴은 상태 값을 컨트롤에 전달하고 onChange 핸들러에서 그 상태를 업데이트하는 것입니다.

onChange 이벤트 이해하기

JSX의 onChange prop으로 input, textarea 또는 select에 핸들러를 연결합니다. 텍스트 필드와 select에서는 event.target.value를 읽고, 체크박스에서는 불리언 값인 event.target.checked를 읽습니다. 그런 다음 핸들러가 해당 컨트롤과 연결된 상태를 업데이트합니다.

제어 폼 컨트롤에서는 표시되는 값이 상태에서 옵니다. 핸들러가 상태를 업데이트하면 React는 새 값으로 컨트롤을 렌더링합니다. 이렇게 하면 인터페이스와 컴포넌트 데이터가 동기화됩니다. 상호작용 중에 컴포넌트가 값을 관리할 필요가 없다면 비제어 컨트롤을 선택하세요.

텍스트 입력에 onChange 구현하기

텍스트 입력은 상태에 문자열로 저장하고, value로 전달한 뒤 이벤트에서 새 값을 가져와 업데이트합니다. 상태에 name이 있는 클래스 컴포넌트라면 JSX 컨트롤을 <input value={this.state.name} onChange={event => this.setState({ name: event.target.value })} />처럼 작성할 수 있습니다. 상태가 업데이트되면 입력할 때마다 표시되는 텍스트도 바뀝니다. 입력 컨트롤을 사용하는 동안 상태 값은 계속 문자열로 유지하세요.

아래의 실행 가능한 JavaScript 예제는 텍스트 필드, 체크박스, select의 핸들러 로직만 보여줍니다. 각 핸들러가 어떤 이벤트 속성을 읽는지 작은 상태 설정 함수로 나타내며, React 컨트롤을 렌더링하지는 않습니다. 이 문서의 JSX 예제는 해당 값을 제어 React 컨트롤에 연결하는 방법을 보여줍니다. 변경되지 않은 예제와 출력 블록의 화면 표시 문구는 영어로 남아 있습니다.

let name = '';
let subscribed = false;
let category = 'books';

const setName = (value) => { name = value; };
const setSubscribed = (value) => { subscribed = value; };
const setCategory = (value) => { category = value; };

const handleNameChange = (event) => setName(event.target.value);
const handleSubscribedChange = (event) => setSubscribed(event.target.checked);
const handleCategoryChange = (event) => setCategory(event.target.value);

handleNameChange({ target: { value: 'Ada' } });
handleSubscribedChange({ target: { checked: true } });
handleCategoryChange({ target: { value: 'music' } });

console.log(`Name: ${name}`);
console.log(`Subscribed: ${subscribed}`);
console.log(`Category: ${category}`);

Name: Ada
Subscribed: true
Category: music

React 컴포넌트에서는 실행 가능한 예제의 설정 함수가 상태 업데이트에 해당합니다. 컨트롤에 표시되는 값은 그 상태에서 오므로 React가 화면과 데이터를 동기화할 수 있습니다.

체크박스 다루기

체크박스는 불리언 선택 항목이므로 checked로 선택 상태를 제어하고, 핸들러에서는 event.target.checked를 읽습니다. 클래스 컴포넌트의 체크박스는 checked={this.state.subscribed}와 onChange={event => this.setState({ subscribed: event.target.checked })}를 사용할 수 있습니다. 체크박스의 value는 폼 제출 시 전달되는 값이며, 사용자가 체크했는지를 나타내지는 않습니다.

onChange로 select 드롭다운 다루기

select 컨트롤에는 선택 상태를 value로 전달하고, 다음 선택 항목은 event.target.value에서 읽습니다. 예를 들어 <select value={this.state.category} onChange={event => this.setState({ category: event.target.value })}><option value="books">Books</option><option value="music">Music</option></select>를 사용할 수 있습니다. option의 값은 상태에 저장되는 데이터이며 화면에 보이는 레이블과 다를 수 있습니다. 상태를 업데이트하면 선택된 항목과 이에 따라 달라지는 인터페이스가 같은 기준값을 따릅니다.

onChange 사용 모범 사례

핸들러는 이벤트를 읽고 관련 상태를 업데이트하는 데 집중하도록 하세요. 폼의 필요에 맞는 시점에 값을 검증하세요. 예를 들어 즉각적인 피드백이 필요하면 입력 중에 검증하고, 입력 중 피드백이 방해가 된다면 제출할 때 검증할 수 있습니다. value prop과 상태는 일관된 타입을 사용하고, 체크박스 상태에는 checked를 사용하세요.

핸들러가 대규모 데이터 필터링이나 검색 요청처럼 비용이 큰 작업을 시작한다면 디바운싱이 도움이 될 수 있습니다. 디바운싱은 응답을 지연시키며 React 렌더링을 자동으로 막지는 않으므로, 해당 작업과 사용자 경험에 이점이 있을 때만 사용하세요. 키를 입력할 때마다 제어 상태를 업데이트하는 것은 일반적인 패턴입니다.

입력의 DOM 값을 프로그램으로 바꾸는 것은 고급 사례입니다. 값을 직접 지정해도 React가 변경을 감지하거나 예상한 핸들러를 호출한다고 보장할 수는 없습니다. 입력을 제어하는 상태를 업데이트하는 방법을 우선 사용하세요. 외부 코드가 폼 컨트롤과 상호작용해야 한다면 가능한 경우 컴포넌트의 공개 인터페이스를 사용하고, 해당 통합 환경에서 동작을 확인하세요. setNativeValue 같은 헬퍼 이름은 일반적인 React API도 아니며 보장된 해결책도 아닙니다.

결론

React의 onChange 핸들러는 사용자의 입력 변경을 컴포넌트 상태와 연결합니다. 텍스트와 select 컨트롤에서는 value를, 체크박스에서는 checked를 읽은 뒤 업데이트된 상태를 사용해 제어 컨트롤을 렌더링하세요. 검증과 디바운싱은 일괄 규칙으로 적용하지 말고 폼의 필요에 맞추세요.

자주 묻는 질문

1. React에서 onChange는 어떤 역할을 하나요? 폼 컨트롤이 바뀌면 핸들러를 호출하여 컴포넌트가 새 값을 읽고 데이터나 상태를 업데이트할 수 있게 합니다.

2. 텍스트 입력은 어떻게 처리하나요? 문자열 상태 값을 input의 value prop에 전달하고, onChange에서 event.target.value를 읽어 그 상태를 업데이트합니다.

3. 체크박스는 어떻게 처리하나요? 불리언 상태를 checked에 연결하고, event.target.checked를 읽어 상태를 업데이트합니다.

4. select 요소는 어떻게 처리하나요? 상태 값을 value에 설정하고 선택이 바뀌면 event.target.value를 읽어 상태를 업데이트합니다.

5. 모든 onChange 핸들러에 디바운싱을 적용해야 하나요? 아닙니다. 핸들러가 비용이 큰 작업을 시작할 때 고려하세요. 모든 상태 업데이트에 필요한 것은 아니며 렌더링 횟수가 줄어든다고 보장하지도 않습니다.

6. 프로그램으로 값을 바꿨는데 핸들러가 호출되지 않는 이유는 무엇인가요? DOM 값을 직접 지정해도 React의 변경 처리가 반드시 실행되는 것은 아닙니다. 입력을 제어하는 상태를 업데이트하거나 컴포넌트가 지원하는 인터페이스를 사용하세요.