[React] const { value, name } = e.target; 에서 value가 사용되지 않을 때

VS코드에서 React 코드를 하다가보니 제대로 값이 전달되지 않았다. 무슨일인가 찾아봤더니 value 부분이 색깔이 짙어져있었다. 짙어져있다면 'value'가 선언은 되었지만 해당 값이 읽히지는 않는중이다.

 

여러가지 시도하다가 보니 해결한 방법은 [name]: value, 로 수정하는 것이 해결법이였다.

 

 

 

 

전체 코드

// import './src/uss/component/userDetail.css';
import React, { useState, useCallback } from 'react';
import axios from 'axios';
import { Link } from 'react-router-dom';
 
const UserDetail = () => {
    const [inputs, setInputs] = useState({
        username: ' ',
        password: ' ',
    });
 
    const { username, password } = inputs; // 비구조화 할당을 통해 값 추출
 
    const handleChange = useCallback(
        (e) => {
            const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
            setInputs({
                ...inputs,         // 기존의 input 객체를 복사한 뒤
                [name]: value, // name 키를 가진 값을 value 로 설정
            });
        },
        [inputs]
    );
 
    const login = (e) => {
        e.preventDefault();
        console.log(setInputs);
        alert('do Login');
 
        axios
            .post(`http://localhost:8080/users/login`, {
                username,
                password,
            })
            .then((res) => {
                alert('로그인 되셨습니다');
                console.log(res);
                // alert('res = ' + JSON.stringify(res));
                // alert('res.data = ' + JSON.stringify(res.data));
                alert('res.data.data = ' + res.data.data);
                alert('JOSN.stringify(res.data.data) = ' + JSON.stringify(res.data.data));
 
                setInputs(res.data);
            })
            .catch(() => {
                alert('가입하지 않은 아이디이거나, 잘못된 비밀번호입니다.');
            });
    };
 
    return (
        <>
            <form onSubmit={(e) => e.preventDefault()}>
                <h2>로그인</h2>
 
                <div className="imgcontainer">
                    <img src="img_avatar2.png" alt="Avatar" className="avatar" />
                </div>
 
                <div className="container">
                    <label htmlFor="username">
                        <b>ID</b>
                    </label>
                    <input type="text" placeholder="Enter Username" name="username" value={inputs.username || ''} onChange={handleChange} required />
 
                    <label htmlFor="password">
                        <b>Password</b>
                    </label>
                    <input type="password" placeholder="Enter Password" name="password" value={inputs.password || ''} onChange={handleChange} required />
 
                    <button type="submit" onClick={login}>
                        로그인
                    </button>
 
                    <div className="container" />
                    <Link to="/">
                        <button type="submit" className="cancelbtn">
                            취소
                        </button>
                    </Link>
                </div>
            </form>
        </>
    );
};
 
export default UserDetail;
 

 

 

 

 

 

 

베타존 : 네이버쇼핑 스마트스토어