ReactJS - 제어된 컴포넌트: 초보자 가이드

안녕하세요, 미래의 React 개발자 여러분! 오늘 우리는 ReactJS의 제어된 컴포넌트 세계로 흥미로운 여정을 떠납니다. 프로그래밍에 처음이라면 걱정하지 마세요 - 저는 친절한 안내자가 되어, 단계별로 함께 진행하겠습니다. 이 튜토리얼이 끝나면, 프로처럼 폼을 만드는 법을 배울 것입니다!

ReactJS - Controlled Component

제어된 컴포넌트는 무엇인가요?

들어보기 전에 간단한 비유를 시작해보겠습니다. 고급 레스토랑에서 맞춤형 피자를 주문하는 상황을 상상해보세요. 이 시나리오에서, 당신(React 컴포넌트)은 피자에 올라갈 것(폼 데이터)을 제어합니다. 토핑을 추가하거나 제거하고 싶을 때마다 웨이터(상태)에게 말하고, 그들은 당신의 주문을 갱신합니다. 이것이 React에서 제어된 컴포넌트가 작동하는 방식입니다!

React 용어로, 제어된 컴포넌트는 그 값이 React에 의해 제어되는 입력 폼 요소입니다. DOM이 폼 데이터를 처리하는 대신, React이 담당합니다.

제어된 컴포넌트를 사용하는 이유는 무엇인가요?

단일 참고 출처: 모든 폼 데이터는 컴포넌트 상태에 저장됩니다.
즉각적인 입력 접근: 입력 값을 바로 접근할 수 있습니다.
더 많은 제어: 입력 데이터를 쉽게 조작하고 검증할 수 있습니다.

이제 코드로 손을 더러 만들어보겠습니다!

단일 입력 제어된 컴포넌트

간단한 예제로 시작해보겠습니다 - 사용자를 환영하는 텍스트 입력 필드입니다.

import React, { useState } from 'react';

function GreetingInput() {
const [name, setName] = useState('');

const handleChange = (event) => {
setName(event.target.value);
};

return (
<div>
<input type="text" value={name} onChange={handleChange} />
<p>Hello, {name}!</p>
</div>
);
}

export default GreetingInput;

이를 깨어보면:

useState를 React에서 import하여 컴포넌트 상태를 관리합니다.
상태 변수 name과 그 설정 함수 setName을 생성합니다.
handleChange 함수는 입력이 변경될 때마다 name 상태를 갱신합니다.
JSX에서 입력 필드의 value를 name으로 설정하고 onChange 이벤트를 handleChange에 연결합니다.
현재 name 값을 사용하여 인사를 표시합니다.

이것이 제어된 컴포넌트의 본질입니다 - React가 상태를 통해 입력 필드의 값을 제어합니다.

자신이 시도해보세요!

입력 필드에 이름을 입력해보세요. 인사가 즉시 갱신되는 것을 보세요! 제어된 컴포넌트의 마법입니다!

간단한 폼 생성

이제 기본을 다지고, 여러 입력 필드를 가진 더 복잡한 폼을 만들어보겠습니다.

import React, { useState } from 'react';

function PizzaOrderForm() {
const [order, setOrder] = useState({
name: '',
size: 'medium',
toppings: []
});

const handleChange = (event) => {
const { name, value, type, checked } = event.target;

if (type === 'checkbox') {
if (checked) {
setOrder(prevOrder => ({
...prevOrder,
toppings: [...prevOrder.toppings, value]
}));
} else {
setOrder(prevOrder => ({
...prevOrder,
toppings: prevOrder.toppings.filter(topping => topping !== value)
}));
}
} else {
setOrder(prevOrder => ({
...prevOrder,
[name]: value
}));
}
};

const handleSubmit = (event) => {
event.preventDefault();
alert(`주문 완료! 이름: ${order.name}, 사이즈: ${order.size}, 토핑: ${order.toppings.join(', ')}`);
};

return (
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
value={order.name}
onChange={handleChange}
placeholder="당신의 이름"
/>
<select name="size" value={order.size} onChange={handleChange}>
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
<label>
<input
type="checkbox"
name="toppings"
value="cheese"
checked={order.toppings.includes('cheese')}
onChange={handleChange}
/>
Cheese
</label>
<label>
<input
type="checkbox"
name="toppings"
value="pepperoni"
checked={order.toppings.includes('pepperoni')}
onChange={handleChange}
/>
Pepperoni
</label>
<button type="submit">주문하기</button>
</form>
);
}

export default PizzaOrderForm;

와우, 많은 코드네! 하지만 걱정하지 마세요, 단계별로 설명해드리겠습니다:

상태 객체 order를 생성하여 모든 폼 데이터를 저장합니다.
handleChange 함수는 이제 더 복잡합니다. 다양한 입력 유형을 처리합니다:

텍스트와 선택 입력의 경우, 상태의 해당 속성을 갱신합니다.
체크박스의 경우, 토핑을 추가하거나 제거합니다.

handleSubmit 함수는 기본 폼 제출 동작을 방지하고 주문 세부 정보를 알림으로 보여줍니다.
JSX에서 이름, 사이즈(선택), 토핑(체크박스) 입력 필드를 생성합니다.
각 입력 필드의 value 또는 체크 상태를 order 상태로 제어합니다.

제어된 폼의 강력한 기능

이 설정으로, 폼 데이터를 완전히 제어할 수 있습니다. 검증을 추가하고 싶다면? handleChange 함수를 수정하면 됩니다. 제출 전에 데이터를 변환하고 싶다면? handleSubmit 함수를 갱신하면 됩니다. 가능성은 무한합니다!

제어된 컴포넌트의 일반 방법

제어된 컴포넌트에서 일반적으로 사용되는 방법을 요약해보겠습니다:

방법	설명
`useState`	컴포넌트 상태를 관리하는 훅
`onChange`	입력 변경 이벤트 처리자
`onSubmit`	폼 제출 이벤트 처리자
`preventDefault`	기본 폼 제출 동작을 방지합니다
`event.target.value`	입력의 현재 값을 가져옵니다
`event.target.checked`	체크박스의 체크 상태를 가져옵니다

결론

축하합니다! React의 제어된 컴포넌트에 대해 배웠습니다. 단일 입력에서 복잡한 폼까지, 심지어 피자 주문 폼을 만들어보았습니다(이제 배고파 보이네요!). 제어된 컴포넌트는 폼 데이터를 정밀하게 관리할 수 있는 힘을 주고 있습니다.처음에는 많은 작업처럼 보일 수 있지만, 얻는 제어와 유연성은 분명히 가치가 있습니다.

React 여정을 계속하면서, 제어된 컴포넌트를 다양한 방법으로 사용할 수 있는 많은 기회를 찾게 될 것입니다. 블로그 포스트 편집기, 사용자 등록 폼, 심지어 피자 배달 앱(만약 그렇게 한다면, 저에게 할인 코드를 보내주세요!)을 만들 수도 있습니다!

계속 연습하고, 호기심을 가지고, 행복하게 코딩하세요!

Credits: Image by storyset