React - input 사용하기

 - App.js -

import React from 'react';
import InputSample from './InputSample';

function App() {
  return (
    <InputSample />
  );
}

export default App;

 

이벤트 함수 생성

- InputSample.js -

function InputSample(){
  const onChange() = (e) => {
    console.log(e.target);
  }
  return (
    <div>
    
    ....

e 는 아래 코드에서 어떤 이벤트가 생성될 때, 이벤트에 대한 내용이 담기는 객체이다.

e.target은 이벤트가 발생한 DOM에 대한 내용을 담고 있다.

e.target.value 현재 발생하는 이벤트의 구체적인 값을 담고 있음

 

import React, { 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>
      <b>값 : </b>
      {text}
      </div>
    </div>
  );
}

export default InputSample;

 

만약 input 에 value={text} 쓰지 않으면 초기화할 때 입력창에 쓴 글씨는 사라지지 않는다.

-> 다른 함수로 값 변경할 때, 다 같이 입력값을 변경하고 싶을 때는 value값을 지정해주어야 한다.

 

input 여러개 사용하기

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, // 대괄호로 감싸면 상태에 따라 name또는 nickname값을 지정한다.
    });
  };

  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;

 

객체를 업데이트할 때는 spread문법과 특정값을 덮어씌우는 방식으로 접근해야 한다.

setInputs({
  ...inputs, // 기존의 내용 가져오기
  [name]: value, // 대괄호로 감싸면 상태에 따라 name또는 nickname값을 지정한다.
});

여기서의 name은 name="name"의 name 이다.

하지만 const {name, nickname} = ... 이 부분에서는 "name" 을 가리킴