React Js Part 이벤트 처리 및 양식 관리

React 시리즈에 다시 오신 것을 환영합니다! 지난 게시물에서 우리는 React 애플리케이션을 구축하기 위한 기초를 마련하는 기본 개념인 구성 요소, 상태 및 소품에 대해 논의했습니다. 이번 포스팅에서는 React의 이벤트 처리와 양식 관리에 대해 살펴보겠습니다. 이러한 개념을 이해하면 애플리케이션을 대화형으로 만들고 사용자 입력에 반응하도록 만들 수 있습니다.

React의 이벤트 처리 이해

React의 이벤트 처리는 HTML 및 JavaScript의 이벤트 처리와 유사하지만 몇 가지 주요 차이점이 있습니다. React에서는 CamelCase를 사용하여 이벤트 이름을 지정하고 함수를 이벤트 핸들러로 전달합니다.

기본 이벤트 처리:

간단한 예부터 시작해 보겠습니다. 버튼 클릭 이벤트를 처리하는 방법은 다음과 같습니다.

import React from 'react';

function ClickButton() {
    const handleClick = () => {
        alert("Button clicked!!!");
    };

    return <button onClick={handleClick}>Click Me</button>;
}

export default ClickButton;

이 예에서는 버튼을 클릭하면 handlerClick 함수가 실행되어 경고가 표시됩니다.

매개변수를 사용하여 이벤트 처리
이벤트 핸들러에 매개변수를 전달해야 하는 경우 화살표 함수를 사용할 수 있습니다.

function GreetingButton({ name }) {
    const handleClick = (name) => {
        alert(`Hello, ${name}!`);
    };

    return <button onClick={() => handleClick(name)}>Greet</button>;
}

여기서 handlerClick 함수는 name 매개변수를 사용하여 맞춤 인사말을 표시합니다.

기본 동작 방지
양식에서는 제출 시 기본 작업(예: 페이지 새로 고침)을 방지하려는 경우가 많습니다. event.preventDefault() 메소드를 사용하여 이를 수행할 수 있습니다:

function Form() {
    const handleSubmit = (event) => {
        event.preventDefault();
        alert("Form submitted!");
    };

    return (
        <form onSubmit={handleSubmit}>
            <button type="submit">Submit</button>
        </form>
    );
}

React의 양식 처리

양식은 웹 애플리케이션의 일반적인 부분이며 React에서 양식 입력을 관리하려면 기존 HTML 양식과 약간 다른 접근 방식이 필요합니다.

제어 구성 요소의 예:

import React, { useState } from 'react';

function ControlledForm() {
    const [inputValue, setInputValue] = useState('');

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

    const handleSubmit = (event) => {
        event.preventDefault();
        alert(`Submitted: ${inputValue}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" value={inputValue} onChange={handleChange} />
            <button type="submit">Submit</button>
        </form>
    );
}

export default ControlledForm;

이 예에서 입력 값은 inputValue 상태 변수에 의해 제어됩니다. handlerChange 함수는 사용자가 입력 필드에 입력할 때마다 상태를 업데이트합니다.

다중 입력 양식
여러 입력의 값을 구성 요소 상태에 객체로 저장하여 쉽게 관리할 수 있습니다.

다중 입력 형식의 예:

import React, { useState } from 'react';

function MultiInputForm() {
    const [formData, setFormData] = useState({ name: '', email: '' });

    const handleChange = (event) => {
        const { name, value } = event.target;
        setFormData({ ...formData, [name]: value });
    };

    const handleSubmit = (event) => {
        event.preventDefault();
        alert(`Name: ${formData.name}, Email: ${formData.email}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                name="name"
                placeholder="Name"
                value={formData.name}
                onChange={handleChange}
            />
            <input
                type="email"
                name="email"
                placeholder="Email"
                value={formData.email}
                onChange={handleChange}
            />
            <button type="submit">Submit</button>
        </form>
    );
}

export default MultiInputForm;

이 예에서 formData 상태 개체는 이름과 이메일 입력에 대한 값을 모두 보유합니다. handlerChange 함수는 입력의 이름 속성을 기반으로 적절한 필드를 업데이트합니다.

---

이번 게시물에서는 React에서 이벤트를 처리하고 양식을 관리하는 방법을 살펴보았습니다. 사용자 입력에 응답하는 대화형 애플리케이션을 만들려면 이러한 개념을 이해하는 것이 중요합니다.

다음 게시물에서는 좀 더 고급 주제를 다루겠습니다. 계속 지켜봐주세요!

위 내용은 React Js Part 이벤트 처리 및 양식 관리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!