React에서 간단한 로그인 양식 만들기

안녕! 👋😊

이 글에서는 React에서 간단한 로그인 폼을 만드는 방법을 보여드리고자 합니다.

시작하기 전에 웹 사이트에서 솔루션에 대한 실행 가능한 예제를 확인하는 것이 좋습니다.
Create simple login form in React

최종 효과:

아래에서는 몇 단계로 이러한 양식을 만드는 방법을 설명하려고 합니다.

예제의 전체 구조는 재사용 가능한 코드 ♻ 역할을 하는 Field 구성 요소와 모든 것을 하나로 묶는 Form 구성 요소로 구성됩니다.

우리의 경우 style 속성이 스타일 지정에 사용되었습니다. 🎨

사용자가 입력한 값을 가져오기 위해 DOM 요소에 대한 핸들을 쉽게 얻고 현재 값을 검색할 수 있는 후크useRef를 사용했습니다.

이러한 값을 사용하여 처리 후 서버로 보낼 수 있는 개체를 만듭니다onSubmit. 📤

onSubmit 이벤트를 다시 로드하는 페이지를 방지하기 위해 preventDefault() 메서드를 명시적으로 호출했습니다.

📝Note
By default ref property is reserved by React, so we should use the forwardRef function.

실제 예:

import React from 'react';
import ReactDOM from 'react-dom';

const appStyle = {
    height: '250px',
    display: 'flex'
};

const formStyle = {
    margin: 'auto',
    padding: '10px',
    border: '1px solid #c9c9c9',
    borderRadius: '5px',
    background: '#f5f5f5',
    width: '220px',
    display: 'block'
};

const labelStyle = {
    margin: '10px 0 5px 0',
    fontFamily: 'Arial, Helvetica, sans-serif',
    fontSize: '15px',
};

const inputStyle = {
    margin: '5px 0 10px 0',
    padding: '5px', 
    border: '1px solid #bfbfbf',
    borderRadius: '3px',
    boxSizing: 'border-box',
    width: '100%'
};

const submitStyle = {
    margin: '10px 0 0 0',
    padding: '7px 10px',
    border: '1px solid #efffff',
    borderRadius: '3px',
    background: '#3085d6',
    width: '100%', 
    fontSize: '15px',
    color: 'white',
    display: 'block'
};

const Field = React.forwardRef(({label, type}, ref) => {
    return (
      <div>
        <label style={labelStyle} >{label}</label>
        <input ref={ref} type={type} style={inputStyle} />
      </div>
    );
});

const Form = ({onSubmit}) => {
    const usernameRef = React.useRef();
    const passwordRef = React.useRef();
    const handleSubmit = e => {
        e.preventDefault();
        const data = {
            username: usernameRef.current.value,
            password: passwordRef.current.value
        };
        onSubmit(data);
    };
    return (
      <form style={formStyle} onSubmit={handleSubmit} >
        <Field ref={usernameRef} label="Username:" type="text" />
        <Field ref={passwordRef} label="Password:" type="password" />
        <div>
          <button style={submitStyle} type="submit">Submit</button>
        </div>
      </form>
    );
};

// Usage example:

const App = () => {
    const handleSubmit = data => {
        const json = JSON.stringify(data, null, 4);
        console.clear();
        console.log(json);
    };
    return (
      <div style={appStyle}>
        <Form onSubmit={handleSubmit} />
      </div>
    );
};

export default App;

이 예제를 실행할 수 있습니다here.

이것이 React의 간단한 로그인 양식의 제 버전입니다.

이 솔루션이 유용하다고 생각되면 댓글 섹션에 알려 주시거나 반응을 남겨주세요 💗🦄💾.
읽어주셔서 감사하고 다음 게시물에서 뵙겠습니다! 😊🔥🔜

우리에게 쓰기! ✉

해결해야 할 문제가 있거나 React 또는 JavaScript 주제와 관련하여 아무도 대답할 수 없는 질문이 있거나 멘토링을 찾고 있는 경우 dirask.com -> Questions에 문의하십시오.

코딩 팁과 요령을 다른 사람들과 공유하는 당사facebook group에 가입할 수도 있습니다! 🔥