[리액트 React] input value 가져오기

안녕하세요.

디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.

 

 

 

 

이번 포스팅에서는

리액트에서 input value를 가져오는 방법에 대해 포스팅하겠습니다.

아이디나 비밀번호 등을 인풋에 담고 해당 내용을 가져와서 서버에 보내는 작업을 하다가

저 같은 리액트 샌애긔들을 위해 공유합니다.

이번 작업 완전히 마무리 되면 로그인 하는 과정도 포스팅해보도록 할게요.

 

 

 

주석들을 꼭! 참고하기시 바랍니다.

  리액트에서 Input Value 가져오는 코드

import React, { useState } from 'react'
import Layout from '../layouts/centered'


const Index = () => {
  //input에서 value를 담기 위한 state 생성
  const [account, setAccount] = useState({
    id: "",
    password: "",
  });

  //input에 입력될 때마다 account state값 변경되게 하는 함수
  const onChangeAccount = (e) => {
    setAccount({
      ...account,
      [e.target.name]: e.target.value,
    });
  };

  return (
    <>
      <Layout>
        <div>
            <Input
              id="id"
              name="id"
              placeholder="아이디를 입력해주세요"
              onChange={onChangeAccount}
            />
            <Input
              id="password"
              name="password"
              type="password"
              placeholder="비밀번호를 입력해주세요"
              onChange={onChangeAccount}
            />
        </div>
      </Layout>
    </>
  )
}

export default Index