[React] input 개수에 따른 useState 활용법

 

오늘은 input 개수에 따른 useState 활용법에 대해 알아보겠습니다.

 

 

 

아래에는 다음과 같은 코드가 있습니다. 이 코드는 input에 사용자명과 메시지를 입력할 수 있는 text란이 2개 있고 확인 버튼을 누르면 alert 메서드로 내가 입력한 사용자명과 메시지를 알려줍니다. 

 

 

📌 App.js

import './App.css';
 
import EventPractice2 from './EventPractice2';
function App() {
  return (
    <>
      <EventPractice2 />
    </>
  );
}
 
export default App;
 

 

 

📌 EventPractice2.js 

import React, {useState} from 'react';
 
const EventPractice2 = () => {
 
  const [username, setUsername] = useState('');
  const [message, setMessage] = useState('');
 
  const onChangeUsername = e => setUsername(e.target.value);
  const onChangeMessage = e => setMessage(e.target.value);
    
  const onClick = () => {
    alert(username + " : " + message );
    setUsername('');
    setMessage('');
  };
  const onKeyUp = e => {
    if(e.key === 'Enter') onClick();
  }
 
  return (
    <div>
      <h1> 이벤트 연습 </h1>
      <input 
      type='text'
      name='username'
      placeholder='사용자명'
      value={username}
      onChange={onChangeUsername}
      />
      <input 
      type='text'
      name='message'
      placeholder='아무거나 입력해보세요'
      value={message}
      onChange={onChangeMessage}
      onKeyUp={onKeyUp}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
};
 
export default EventPractice2;

 

 EventPractice2에는 인풋이 두 개 밖에 없기 때문에 이런 코드도 나쁘지는 않습니다. 하지만 인풋의 개수가 많아질 것 같으면 e. target.name을 활용하는 것이 더 좋을 수 있습니다.

 

예를 들어 

 

const changeHandler = e => {
    [e.target.name] : e.target.value
};

위와 같이 객체 안에서 key를 [ ]로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용됩니다.

 

즉, 아래의 코드에 다음과 같은 객체를 만들면 

 

const name = 'varientKey';
 
const object = {
 [name] : 'value'
}; 
 
 

 

결과는 다음과 같습니다.

 

{
    'variantKey' : 'value'
}

 

이 방식을 적용하여 useState를 통해 사용하는 상태에 문자열이 아닌 객체를 넣어 보겠습니다. 

 

 

📌 EventPractice2.js 

import React, {useState} from 'react';
 
const EventPractice2 = () => {
  const [form, setForm] = useState({
    username: '',
    message: ''
  });
 
  const {username, message} = form;
  
  const onChange = e => {
    const nextForm = {
      ...form, 
      [e.target.name] : e.target.value
    };
    setForm(nextForm);
  }
  // const [username, setUsername] = useState('');
  // const [message, setMessage] = useState('');
 
  // const onChangeUsername = e => setUsername(e.target.value);
  // const onChangeMessage = e => setMessage(e.target.value);
 
  const onKeyUp = e => {
    if(e.key === 'Enter') onClick();
  }
  
  const onClick = () => {
    alert(username + " : " + message );
    setForm({
      username: '',
      message: ''
    })
  };
 
  return (
    <div>
      <h1> 이벤트 연습 </h1>
      <input 
      type='text'
      name='username'
      placeholder='사용자명'
      value={username}
      onChange={onChange}
      />
      <input 
      type='text'
      name='message'
      placeholder='아무거나 입력해보세요'
      value={message}
      onChange={onChange}
      onKeyUp={onKeyUp}
      />
      <button onClick={onClick}>확인</button>
    </div>
  );
};
 
export default EventPractice2;

 

다음과 같이 코드를 저장해도 기능이 잘 작동하는 것을 확인할 수 있습니다.

 

e.target.name 값을 활용하려면, 위와 같이 useState를 쓸 때 인풋 값들이 들어 있는 form 객체를 사용해 주면 됩니다.