React에서 양식 요소로 작업하는 방법
React로 개발할 때 양식 및 양식 요소로 작업하는 것은 HTML 양식 요소가 React에서 다른 DOM 요소와 다소 다르게 동작하기 때문에 복잡할 수 있습니다.
확인란, 텍스트 영역 및 한 줄 텍스트 입력과 같은 양식 및 양식 요소로 작업하는 방법을 알아봅니다.
양식의 입력 필드 관리
React에서 양식의 입력 필드 관리는 종종 상태를 생성하고 입력 필드에 바인딩하여 수행됩니다.
예를 들어:
function App() {
const [firstName, setFirstName] = React.useState('');
function handleFirstNameChange(event) {
setFirstName(event.target.value)
}
return (
<form>
<input type='text' placeholder='First Name' onInput={handleFirstNameChange} />
</form>
)
}
위에는 firstName 상태, onInput 이벤트 및 handleChange 핸들러가 있습니다 . handleChange 함수 는 모든 키 입력에서 실행되어 firstName 상태를 업데이트합니다 .
이 접근 방식은 하나의 입력 필드로 작업할 때 이상적일 수 있지만 여러 입력 필드로 작업할 때 각 입력 요소에 대해 서로 다른 상태 및 처리기 함수를 만드는 것이 반복됩니다.
이러한 상황에서 반복적이고 중복되는 코드를 작성하지 않으려면 각 입력 필드에 고유한 이름을 지정하고 개체를 양식의 초기 상태 값으로 설정한 다음 입력 필드와 동일한 이름을 가진 속성으로 개체를 채웁니다.
예를 들어:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
return (
<form>
<input type='text' placeholder='First Name' name='firstName' />
<input type='text' placeholder='Last Name' name='lastName' />
</form>
)
}
formData 는 양식 내부의 모든 입력 필드를 관리하고 업데이트하는 상태 변수 역할을 합니다. 상태 개체의 속성 이름이 입력 요소의 이름과 동일한지 확인합니다.
입력 데이터로 상태를 업데이트하려면 입력 요소에 onInput 이벤트 리스너를 추가한 다음 생성된 핸들러 함수를 호출합니다.
예를 들어:
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
function handleChange(event) {
setFormData((prevState) => {
return {
...prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
/>
<input
type='text'
placeholder='Last Name'
name='lastName'
onInput={handleChange}
/>
</form>
)
}
위의 코드 블록은 onInput 이벤트와 핸들러 함수인 handleFirstNameChange 를 사용했습니다 . 이 handleFirstNameChange 함수는 호출될 때 상태 속성을 업데이트합니다. 상태 속성의 값은 해당 입력 요소의 값과 동일합니다.
입력을 제어되는 구성 요소로 변환
HTML 양식이 제출되면 기본 동작은 브라우저에서 새 페이지로 이동하는 것입니다. 이 동작은 양식에 입력된 데이터의 유효성을 검사하려는 경우와 같은 일부 상황에서 불편합니다. 대부분의 경우 양식에 입력된 정보에 액세스할 수 있는 JavaScript 기능이 있는 것이 더 적합하다는 것을 알게 될 것입니다. 이는 제어된 구성 요소를 사용하여 React에서 쉽게 달성할 수 있습니다.
index.html 파일을 사용하면 양식 요소가 상태를 추적하고 사용자 입력에 따라 수정합니다. React에서 상태 설정 기능은 구성 요소의 state 속성에 저장된 동적 상태를 수정합니다. React 상태를 진실의 단일 소스로 만들어 두 상태를 결합할 수 있습니다. 이렇게 하면 양식을 만드는 구성 요소가 사용자가 데이터를 입력할 때 발생하는 작업을 제어합니다. React가 제어하는 값이 있는 입력 양식 요소를 제어 구성 요소 또는 제어 입력이라고 합니다.
React 애플리케이션에서 제어된 입력을 사용하려면 입력 요소에 value prop을 추가하세요.
function App() {
const [formData, setFormData] = React.useState(
{
firstName: '',
lastName: ''
}
);
function handleChange(event) {
setFormData((prevState) => {
return {
...prevState,
[event.target.name]: event.target.value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
value={formData.firstName}
/>
<input
type='text'
placeholder='Last Name'
name='lastName'
onInput={handleChange}
value={formData.lastName}
/>
</form>
)
}
이제 입력 요소의 값 특성이 해당 상태 속성의 값으로 설정됩니다. 입력 값은 제어되는 구성 요소를 사용할 때 항상 상태에 따라 결정됩니다.
Textarea 입력 요소 처리
textarea 요소는 일반 입력 요소와 같지만 여러 줄 입력을 보유합니다 . 한 줄 이상이 필요한 정보를 전달할 때 유용합니다.
index.html 파일에서 textarea 태그 요소는 아래 코드 블록에서 볼 수 있는 것처럼 자식에 따라 값을 결정합니다.
<textarea>
Hello, How are you?
</textarea>
React에서 textarea 요소를 사용하려면 textarea 유형의 입력 요소를 만들 수 있습니다 .
이렇게:
function App() {
return (
<form>
<input type='textarea' name='message'/>
</form>
)
}
textarea를 입력 유형으로 사용하는 대신 아래와 같이 입력 유형 태그 대신 textarea 요소 태그를 사용하는 것입니다.
function App() {
return (
<form>
<textarea
name='message'
value='Hello, How are you?'
/>
</form>
)
}
textarea 태그에는 textarea 요소 에 입력된 사용자 정보를 보유하는 value 속성이 있습니다 . 이렇게 하면 기본 React 입력 요소처럼 작동합니다.
React의 체크박스 입력 요소로 작업하기
확인란 입력 으로 작업할 때는 상황이 약간 다릅니다 . 유형 확인란 의 입력 필드 에 값 속성이 없습니다. 그러나 이것은 checked 속성을 가지고 있습니다. 이 checked 속성은 상자가 선택되었는지 여부를 결정하기 위해 부울 값을 요구한다는 점에서 value 속성과 다릅니다.
예를 들어:
function App() {
return (
<form>
<input type='checkbox' id='joining' name='join' />
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
label 요소는 htmlFor 속성을 사용하여 입력 요소의 ID를 참조합니다. 이 htmlFor 속성은 입력 요소(이 경우 결합)의 ID를 사용합니다. HTML 양식을 만들 때 htmlFor 속성은 for 속성을 나타냅니다 .
확인란 은 제어된 입력으로 더 잘 사용됩니다. 상태를 만들고 true 또는 false의 초기 부울 값을 할당하여 이를 달성할 수 있습니다.
체크박스 입력 요소에 두 개의 props, 즉 checked 속성과 setIsChecked() 함수 를 사용하여 상태 값을 결정하는 핸들러 함수가 있는 onChange 이벤트를 포함해야 합니다 .
예를 들어:
function App() {
const [isChecked, setIsChecked] = React.useState(false);
function handleChange() {
setIsChecked((prevState) =>! prevState)
}
return (
<form>
<input
type='checkbox'
id='joining'
name='join'
checked={isChecked}
onChange={handleChange}
/>
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
이 코드 블록은 isChecked 상태를 생성하고 초기 값을 false 로 설정합니다 . isChecked 의 값을 input 요소의 checked 속성 으로 설정합니다. handleChange 함수가 실행되고 체크박스를 클릭할 때마다 isChecked 의 상태 값을 반대 값으로 변경 합니다.
양식 요소에는 확인란, 텍스트 등과 같은 다양한 유형의 여러 입력 요소가 포함될 수 있습니다.
이러한 경우 동일한 유형의 여러 입력 요소를 처리하는 방식과 유사한 방식으로 처리할 수 있습니다.
예를 들면 다음과 같습니다.
function App() {
let[formData, setFormData] = React.useState(
{
firstName: ''
join: true,
}
);
function handleChange(event) {
const {name, value, type, checked} = event.target;
setFormData((prevState) => {
return {
...prevState,
[name]: type === checkbox? checked: value
}
})
}
return (
<form>
<input
type='text'
placeholder='First Name'
name='firstName'
onInput={handleChange}
value={formData.firstName}
/>
<input
type='checkbox'
id='joining'
name='join'
checked={formData.join}
onChange={handleChange}
/>
<label htmlFor='joining'>Will you like to join our team?</label>
</form>
)
}
handleChange 함수 에서 setFormData는 대상 입력 유형이 체크박스 인 경우 삼항 연산자를 사용하여 checked 속성 값을 상태 속성에 할당합니다 . 그렇지 않은 경우 value 특성 의 값을 할당합니다 .
이제 React 양식을 처리할 수 있습니다.
여기에서 다양한 양식 입력 요소를 사용하여 React에서 양식으로 작업하는 방법을 배웠습니다. 또한 체크박스로 작업할 때 value prop 또는 checked prop을 추가하여 양식 요소에 제어된 입력을 적용하는 방법도 배웠습니다.
React 양식 입력 요소를 효율적으로 처리하면 React 애플리케이션의 성능이 향상되어 전반적인 사용자 경험이 향상됩니다.
답글 남기기