쉬운 방법인 React를 사용하여 양식 작성( Typescript 포함)

"폼, uh.. 싫어"

우리 모두는 거기에 있었다. 고통을 덜어주기 위해 formik 또는 redux 양식과 같은 여러 라이브러리를 시도했을 수 있습니다. 적절한 솔루션이기는 하지만 상용구 코드를 많이 사용하기 때문에 코드가 보기에 덜 예쁘고 초보자가 다루기 어렵습니다. 이러한 라이브러리의 견고함이 필요하지 않은 경우 몇 줄의 코드로 사용자 정의 양식 후크를 빌드할 수 있습니다.

이 튜토리얼에서는 후크를 사용한 최신 반응에 대한 지식이 필요합니다.

1단계: 빈 create-react-app 초기화

터미널을 열고 다음을 입력합니다.

npx create-react-app react-hook-form

2단계: 코드 편집기에서 프로젝트를 엽니다.

src 디렉토리로 이동하여 hooks라는 이름으로 새 디렉토리를 만듭니다. hooks 디렉토리 안에 useForm.ts 파일 생성(자바스크립트를 사용하는 경우 useForm.js)

3단계: 종속성 가져오기

사용자 정의 후크의 경우 useState 에서 "react" 후크를 가져옵니다.

import { useState } from "react";

4단계: 기능적 구성요소 정의.

useForm라는 기능 구성 요소를 만들고 양식의 초기 상태를 정의합니다. export 키워드를 추가하는 것을 잊지 마십시오.

import { useState } from "react";

// useForm functional component
export const useForm = (callback: any, initialState = {}) => {
    const [values, setValues] = useState(initialState);

}

여기서 initialState는 이 후크를 사용하는 구성 요소에서 전달될 이메일, 비밀번호 등과 같이 양식이 가질 수 있는 다양한 값을 저장합니다. callback는 사용자가 양식을 제출할 때 실행될 함수입니다.

5단계: onChange 함수

onChange 함수는 사용자가 입력 필드에 무언가를 입력할 때마다 변경 이벤트를 처리하는 데 사용됩니다.

import { useState } from "react";

// useForm functional componen
export const useForm = (callback: any, initialState = {}) => {
    const [values, setValues] = useState(initialState);

    // onChange
    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setValues({ ...values, [event.target.name]: 
    event.target.value });
    };

}

이 함수는 대상 이름으로 전달되는 이벤트의 대상 값을 설정합니다. 입력 요소의 이름을 "email"로 지정했다고 가정하면 이메일 필드에 입력된 값은 initialState의 이메일 속성으로 설정됩니다. 이를 위해서는 입력 필드에 지정된 이름과 동일한 이름을 가진 속성이 initialState에 필요합니다.

6단계: onSubmit 함수

onSubmit()는 사용자가 제출 버튼을 클릭했을 때 전달된 callback() 함수를 실행합니다.

import { useState } from "react";

// useForm functional componen
export const useForm = (callback: any, initialState = {}) => {
    const [values, setValues] = useState(initialState);

    // onChange
    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setValues({ ...values, [event.target.name]: event.target.value });
    };

}

    // onSubmit
    const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        await callback(); // triggering the callback
    };

callback()는 일반적으로 데이터베이스에 로그인 데이터를 제출하는 것과 같은 비동기 함수이므로 await 키워드를 사용하고 onSubmit을 비동기 함수로 정의합니다.

7단계: 후크의 기능과 데이터를 반환합니다.

import { useState } from "react";

// useForm functional componen
export const useForm = (callback: any, initialState = {}) => {
    const [values, setValues] = useState(initialState);

    // onChange
    const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setValues({ ...values, [event.target.name]: event.target.value });
    };

}

    // onSubmit
    const onSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
        event.preventDefault();
        await callback(); // triggering the callback
    };

    // return values
    return {
        onChange,
        onSubmit,
        values,
    };

이 후크에서 이 후크를 사용하는 구성 요소로 onChange , onSubmit 및 values를 반환합니다.

8단계: 사용

src 디렉토리에 login.tsx 파일(자바스크립트의 경우 login.jsx)을 생성합니다.
다음 코드를 추가합니다.

import React, { useState } from "react";

import { useForm } from "./useForm";

function Login() {
    // defining the initial state for the form
    const initialState = {
        email: "",
        password: "",
    };

    // getting the event handlers from our custom hook
    const { onChange, onSubmit, values } = useForm(
        loginUserCallback,
        initialState
    );

    // a submit function that will execute upon form submission
    async function loginUserCallback() {
        // send "values" to database
    }

    return (
        // don't mind this ugly form :P
        <form onSubmit={onSubmit}>
        <div>
            <input
                name='email'
                id='email'
                type='email'
                placeholder='Email'
                onChange={onChange}
                required
                />

            <input
                name='password'
                id='password'
                type='password'
                placeholder='Password'
                onChange={onChange}
                required
                />
            <button type='submit'>Login</button>
        </div>
        </form>
    );
}

export default Login;

완료! 부피가 큰 양식 구성 요소가 없으며 사용자 정의 후크에 더 많은 이벤트 핸들러를 추가하여 더 강력하게 만듭니다. 쉽고 간단합니다.

인기를 얻고 있는 react-hook-form이라는 npm 패키지가 있습니다. 이 자습서는 해당 패키지에 대한 기본 통찰력입니다. 이 사용자 정의 후크에 양식 유효성 검사와 같은 더 많은 기능을 추가하고 반응을 사용하여 양식 작성을 더 나은 곳으로 만드십시오. :)

읽어 주셔서 감사합니다! 모든 피드백/질문을 주시면 감사하겠습니다.