React :: input 상태와 useRef

📝 input 상태 관리

💡 리액트에서 사용자가 입력 할 수 있는 input 태그의 상태를 관리하는 방법

💬 이벤트에 등록하는 함수에서는 이벤트 객체 'e'를 파라미터로 받아와서 사용

💬 객체의 e.target 은 이벤트가 발생한 DOM인 input DOM을 가르킴

💬 DOM 의 value 값, 즉 e.target.value를 조회 시, 현재 input에 입력한 값을 알 수 있음.

💬 input 의 상태를 관리할 때에는 input 태그의 value 값도 설정해주어야, 상태가 바뀌었을때 input의 내용도 업데이트

// InputSample.js

import React, { useState } from 'react';   // useState 사용

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

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

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

  return (
    <div>
      <input onChange={onChange} value={text}  />  // input의 onChange 이벤트 사용
      <button onClick={onReset}>초기화</button>
      <div>
        <b>값: {text}</b>
      </div>
    </div>
  );
}

export default InputSample;

// App.js 

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

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

export default App;

💡 placeholder 값 설정

💬 placeholder 값 : input 이 비어져있을 때 인풋에 대한 설명을 보여줌

💬 input의 수가 여러 개 : input 에 name 을 설정하고 이벤트가 발생했을 때 이 값을 참조하고, useState 에서는 문자열이 아니라 객체 형태의 상태를 관리하도록 하는 것이 유용

// InputSample.js

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;

💬 리액트 상태 객체 수정

리액트에서 객체를 업데이트하게 될 때에는 기존 객체를 직접 수정하면 안되고, 새로운 객체를 만들어서, 새 객체에 변화를 주어야 된다.

inputs[name] = value;  // error 

setInputs({  // 새로운 객체 생성 후, 이 객체에 대하여 바꾸고, 이를 사용
  ...inputs,
  [name]: value
});

📝 useRef

💬 Hook 함수이며, 특정 DOM을 선택할 때 사용

이전에 만든 InputSample에서는 초기화 버튼을 누르면, 포커스가 초기화 버튼에 그대로 남아있음

// InputSample.js

import React, { useState, useRef } from 'react';   // useRef 사용

function InputSample() {
  ...
  
  const nameInput = useRef();   // useRef()를 사용하여 Ref 객체 생성
  // 이 객체를 우리가 선택하고 싶은 DOM 에 ref 값으로 설정

  const onReset = () => {
    setInputs({
      name: '',
      nickname: ''
    });
    nameInput.current.focus();  // nameInput에 focus
    // Ref 객체의 .current 값 : 우리가 원하는 DOM 
  };
  
  ...

💬 초기화 버튼을 클릭했을 때, 이름 input 에 포커스가 잡히도록 useRef를 사용하여 기능 구현