[React] form 태그 데이터 입력하기

Aug 05, 2024

Contents

1. form 태그 만들기 2. form 태그 데이터 받기 3. Computed Property Name 활용

1. form 태그 만들기

Login


    const [user,setUser] = useState({
        username:"",
        password:""

    });

💡

useState 를 사용해 user 컴포넌트의 상태를 정의하고 초기화한다.

Login


    return (
        <div>
            <form>
                <input type='text' placeholder='username' onChange={changeValue} name="username" />
                <input type='password' placeholder='password' onChange={changeValue} name="password"/>
            <button type='submit'>로그인</button>
            </form>
            <button onClick={loginProcess}>로그인</button>
            <button onClick={move}>로그인 안하고 넘어가기</button>
        </div>
    );

input 태그로 username과 password 를 받는다. form태그에 데이터가 입력될 때 changeValue 함수가 실행된다.

Login


  function changeValue(e){
    console.log(e);
  }

onChange 가 실행될 때 이벤트 객체를 전달받는다.

폼태그에 값이 입력됐을 때 발생하는 이벤트를 콘솔로 확인해본다.

입력한 값은 e.target.value 에 확인한다.

2. form 태그 데이터 받기



    function changeValue(e){
    console.log("value",e.target.value);
    console.log("value",e.target.name);

        setUser({
            username : e.target.value,
            password : e.target.value
        });

        console.log("username",user.username);
        console.log("password",user.password);

    }

💡

changeValue를 통해 setUser의 상태를 폼태그의 입력값으로 업데이트한다.

💡

이렇게 작성하면 username과 password 에 동일한 e.target.value 값이 동시에 입력된다.

3. Computed Property Name 활용

💡

Computed Property Name은 객체의 프로퍼티 키를 문자열로 변환할 수 있는 표현식을 사용해(변수, 함수 등) 동적으로 지정하는 문법이다. 이를 통해 객체 리터럴 내부에서 Computed Property Name으로 프로퍼티 키를 동적으로 생성할 수 있다.

프로퍼티 키로 사용할 표현식을 대괄호”[]”로 묶어야 한다.


    function changeValue(e){
        console.log(e);
        console.log("e.target.value",e.target.value);
        console.log("e.target.name",e.target.name);

          //Computed Property Name
            setUser({
                [e.target.name]:e.target.value,
            });

        console.log("username",user.username);
        console.log("password",user.password);

    }