[React] input 처리

하나의 input 처리하기

InputSample.js

import React from 'react';
import { useState } from 'react';

function InputSample() {
    const [text, setText] = useState('');

    const onChange = (e) => {
        setText(e.target.value);
    };

    const onReset = () => {
        setText('');
    };

    return (
        <div>
            <input onChange={onChange} value={text} />
            <button onClick={onReset}>초기화</button>
            <div>
                <d>값: {text}</d>
            </div>

        </div>
    );
}

export default InputSample;

input의 onChange 이벤트를 사용하고 이벤트 객체를 e로 받아 사용했다. e.target은 input DOM, e.target.value은 현재 input에 입력한 값을 가져온다.

여러개의 input 처리하기

InputSample.js

import React, { useState } from 'react';

function InputSample() {

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

  const { name, nickname } = inputs; 

  const onChange = (e) => { 
    const { name, value }  = e.target;
    setInputs({
      ...inputs,
      [name]: value,
    });
  };

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

    return ( 
        <div>
            <input name="name" placeholder="이름" onChange={onChange} value={name} ref = {nameInput} />
            <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname} />

            <button onClick={onReset}>초기화</button>
            <div>
                <b>값: </b>
                {name} ({nickname})
            </div>
        </div>
    );
}

export default InputSample;

---

✔ useState({
        name: '',
        nickname: '',
    })` 객체로 여러개의 input을 관리하고 있다.

✔const {name, nickname} = inputs; : 비구조화 할당을 통해 값을 추출한다.

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

리액트의 불변성을 지키기위해 이전 객체를 모두 복사 후(스프레드 문법 사용) 그뒤에 변경할 객체를 작성한다.

불변성을 지켜줘야만 리액트 컴포넌트에서 상태가 업데이트 됐음을 감지 할 수 있고 이에따라 필요한 리렌더링이 진행된다.