[6# Input Handling] 사용자 Input 처리하기

목차 : 

1. input 처리

2. state 변수가 많을 경우

---

 

1. input 처리 

보통 HTML에서 사용자의 input을 처리하는 요소는 <input ...> , <select> .. <options>.. 등이 존재한다.

input 처리 요소에서 사용자가 값을 입력하면 event가 발생하는데 이걸  onChange 속성으로 처리할 수 있다.

 

React의 State를 이용한 input 처리 예제 코드를 보자.

import React, { useState } from 'react';

function InputForm() {
  const [inputValue, setInputValue] = useState(''); // 초기값은 빈 문자열

  // 입력 필드의 내용이 변경될 때 호출되는 핸들러
  const handleInputChange = (e) => {
    setInputValue(e.target.value);
  }

  // 폼 제출 핸들러
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('입력값:', inputValue);
  }

  return (
    <div>
      <h1>React 입력 폼 예제</h1>
      <form onSubmit={handleSubmit}>
        <label>
          입력값:
          <input
            type="text"
            value={inputValue}
            onChange={handleInputChange}
          />
        </label>
        <button type="submit">제출</button>
      </form>
    </div>
  );
}

export default InputForm;

 

위 코드에서 중요한 부분만 해석해보면

input tag안에 value는 inputValue라는 state 변수이며 사용자가 입력할 때 마다 onChange가 event를 감지해서

handleInputChage 함수를 호출한다. 이때 event 변수는 e로 명명하며 e안에는 여러 값들이 존재하며 사용자가 입력한 

값은 e.target.value 안에 위치한다.

 

2. state 변수가 많을 경우

여러개의 state가 존재할 경우 아래와 같이 사용해보자.

//Before
const [title, setTitle] = useState(''); 
const [contents, setContents] = useState(''); 

//After
const [state, setState] = useState({
	title: "",
	contents: ""
});

 

state 변수의 초기값을 Object로 줄 수 있으며 위 코드 처럼 사용하면 여러개의 state 변수를 선언할 필요 없이 하나의 state 변수로 동작을 수행할 수 있다.

 

 

 

*만약 사용자가 입력할 수 있는 input tag가 여러개 존재해 state 변수가 여러개일 경우  input tag 각각의 onChage 를 처리하는 함수를 다 만들어주면 비효율적이다.

이를 해결하기 위해 input tag의 name속성과 state 변수 이름을 일치 시켜 처리할 수 있다.

아래 코드를 참고하자.

import React, { useState } from 'react';

function InputForm() {
  const [state, setState] = useState({
	title: '',
	contents: ''
  });
  
  //상태 변화 함수
  const handleStateChange = (e) => {
    setInputValue(e.target.value);
    setState({
    	...state,
        [e.target.name]: e.target.value
    })
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('입력값:', inputValue);
  }

  return (
    <div>
      <input
          	name="title"
            type="text"
            value={state.title}
            onChange={handleInputChange}
          />
          <input
          	name="contents"
            type="text"
            value={state.contents}
            onChange={handleInputChange}
          />
    </div>
  );
}

export default InputForm;

 

위 코드에서 setState함수 안에 ...state 는 일명 spread 라고 부르며 setState 함수안에서 사용했을 대 state 변수 안에 선언된 모든 객체의 값을 현재 state 값으로 변경하겠다는 것을 의미한다.

그래서 특정 상태값만 변경을 할 경우, ...state로 모든 객체를 현재 값으로 할당하고 특정 상태값만 다시 한번 새로운 값으로 변경하는 것이다.

단, 주의해야할 점은 spread 코드를 특정 상태값 변경하는 코드 아래에 사용할 경우 변경이 이뤄지지 않는다.