버튼 클릭 시 React에서 폼 데이터 처리
이전 강의에서는 입력 필드에 문자를 입력할 때마다 결과가 단락에 즉시 나타나도록 했습니다. 물론 이것은 보기 좋지만 단점이 있습니다.
우리가 무거운, 리소스 집약적인 작업을 해야 한다고 상상해 봅시다. 문자를 입력할 때마다 이 작업을 수행하는 것은 최적이 아닙니다. - 데이터 입력이 완료될 때까지 기다린 다음 필요한 작업을 한 번 수행하고 결과를 단락에 표시하는 것이 더 좋습니다.
이를 위해서는 클릭했을 때 우리의 리소스 집약적인 작업을 수행할 버튼을 도입해야 합니다. 이 경우 다시 각 입력 필드에는 자체 상태가 해당하며, 작업 결과를 기록하고 화면에 표시하기 위해 하나의 상태가 더 필요합니다.
예를 들어 살펴보겠습니다. 두 개의 입력 필드와 버튼이 있다고 가정해 봅시다. 버튼을 클릭하면 입력 필드에 입력된 숫자의 합을 구해봅시다.
구현해 봅시다:
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
function handleChange1(event) {
setValue1(event.target.value);
}
function handleChange2(event) {
setValue2(event.target.value);
}
function handleClick() {
setResult(Number(value1) + Number(value2));
}
return <div>
<input value={value1} onChange={handleChange1} />
<input value={value2} onChange={handleChange2} />
<button onClick={handleClick}>btn</button>
<p>result: {result}</p>
</div>;
}
축약형을 사용할 수 있습니다:
function App() {
const [value1, setValue1] = useState(0);
const [value2, setValue2] = useState(0);
const [result, setResult] = useState(0);
return <div>
<input value={value1} onChange={event => setValue1(event.target.value)} />
<input value={value2} onChange={event => setValue2(event.target.value)} />
<button onClick={() => setResult(Number(value1) + Number(value2))}>btn</button>
<p>result: {result}</p>
</div>;
}
두 개의 입력 필드, 두 개의 버튼 및 단락이 주어집니다. 입력 필드에는 숫자가 입력됩니다. 첫 번째 버튼을 클릭하면 숫자의 합을 구하고, 두 번째 버튼을 클릭하면 곱을 구합니다. 결과를 단락에 출력합니다.
두 개의 입력 필드, 버튼 및 단락이 주어집니다. 입력 필드에 형식 2025-12-31의 날짜가 입력됩니다. 버튼을 클릭하면 날짜 사이의 차이를 일 단위로 구하고 결과를 단락에 출력합니다.
이전 문제를 수정하여 입력 필드에 기본적으로 현재 날짜가 표시되도록 합니다.
입력 필드와 단락이 주어집니다. 입력 필드에는 숫자가 입력됩니다. 포커스를 잃으면 입력된 숫자의 자릿수 합을 단락에 출력합니다.
입력 필드와 단락이 주어집니다. 입력 필드에는 숫자가 입력됩니다. 포커스를 잃으면 입력된 숫자의 약수의 곱을 단락에 출력합니다.
