[react] 한개의 useState로 input상태 변환하기 (value 속성과 name속성을 활용한)

공부한것 정리한 개인적인 글

(공부사이트: https://react.vlpt.us/basic/09-multiple-inputs.html)

 

import React, { useState } from 'react';

function InputSample() {
  const [inputs, setInputs] = useState({
    name: '',
    nickname: ''
  });

  const { name, nickname } = inputs; // 비구조화 할당을 통해 값 추출

  const onChange = (e) => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

  const onReset = () => {
    setInputs({
      name: '',
      nickname: '',
    })
  };


  return (
    <div>
      <input name="name" placeholder="이름" onChange={onChange} value={name} />
      <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: </b>
        {name} ({nickname})
      </div>
    </div>
  );
}

export default InputSample;

여기서 이해가 안갔던 부분 : input 입력값을 변경 할 때 한 개의 useState를 사용하는 방법에 대해 이해가 가지 않았다. 

 

input 태그에서 value의 역할 

HTML에서 지정 되어있으면 input창의 초깃값을 의미한다. (mdn 참조)

 

위 코드에서는 value = {name} 또는 value = {nickname} 으로 되어있다. 이것은 useState로 변경된 것을 그대로 보이게 하는 역할을 하게 된다. 

 

예로 input 위태그 (이름 입력창)에 value = {name}에서 {nickname}으로 변경되면 이름창에 아무리 무언가를 입력하려고 해도 변하지 않고 닉네임창에 무언가를 입력하면 이름창까지 똑같이 보여진다. 

 

그러므로 

const onChange = (e) => {
    const { value, name } = e.target; // 우선 e.target 에서 name 과 value 를 추출
    setInputs({
      ...inputs, // 기존의 input 객체를 복사한 뒤
      [name]: value // name 키를 가진 값을 value 로 설정
    });
  };

 사용자가 input창에 어떤것을 입력하게 되면  onChange함수가 실행된다. 

onChange함수에서는  

구조분해 할당을 통해 value에 e.target.value를, name에 e.target.name을 넣어준다.e.target은 특정 이벤트가 발생한 태그를 의미한다.그러므로, 해석해보면 onChange 함수 내부에서는 내가 input창에 넣은 그 태그!!!

즉 이름에 넣으면 그 이름 태그, 닉네임에 넣으면 그 닉네임 태그를 가리킨다.

 

 

setInputs({
      ...inputs, 
      [name] : value
    })

 

이 부분을 해석하는데 애를 먹었는데,

 

위의 내용을 넣어보면,

 

setInputs({
      ...inputs, 
      [e.target.name] : e.target.value
    })

즉, 내가 지금 입력한 태그의 값을 내가 입력한 값으로 변경하겠다는 것이다.

 

그렇다면! 

<input name="name" placeholder='이름' onChange={onChange} value={name} />
<input name="nickname" placeholder='닉네임' onChange={onChange} value={nickname} />

이 input창의 name 속성의 역할은?!

이것은 바로...  e.target.name이다.

 

즉, 내가 이름창에 무언가를 입력하면 e.target.name 은 

input의 name 속성을 가져와 name이 되고 

 

내가 닉네임창에 무언가를 입력하면 e.target.name은 nickname이 된다. 

 

setInputs({
      ...inputs, 
      [e.target.name] : e.target.value
    })

 

그러면 이름창에 입력하면 

위의 함수가 실행되면서

name의 value를 e.target.value(내가 입력한거)로 바꿔주고, 

 

닉네임창에 입력하면 

nickname의 value를 e.target.value(내가 입력한거)로 바꿔주는 것이다.!!!!

 

 

 

정리하자면, 

 

1.내가 이름창에 입력을 한다. 

2. useState가 실행된다.

3. 이름창에 내가 입력한 것이 보임

       => value의 name이 e.target.value(내가 입력한거)로 변경됨

4. 위와 동시에 창 아래의 '값:'글씨 다음에  내가 입력한 것이 보임