여러개의 input 상태 관리하기

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, //  spread를 사용하여 기존 객체 복사 
      [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;

리액트 상태에서 객체를 수정할 때는 직접적으로 수정하면 안된다.
새로운 객체를 만들어서 새로운 객체에 변화를 주고, 이를 상태로 사용해주어야 합니다.
불변성을 지켜야지 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지 할 수 있다.
이에 따라 필요한 리렌더링된다. 불편성을 지켜야지만 컴포넌트 업데이트 성능을 최적화 할 수 있다.

---

ref

함수형 컴포넌트에서 Hook - useRef();
클래스형 컴포넌트에서 React.createRef();, 콜백함수

---

useRef

Component에서 특정 DOM 을 선택해야 할 때 사용한다.
특정 엘리먼트 크기 or 위치 가져올때, 스크롤 바 위치 or 설정, 포커스 설정 등 용도 외에도 컴포넌트 안에서 조회 및 수정 할 수 있는 변수를 관리하는 것 입니다.

useRef로 관리하는 변수의 값이 바뀌어도 컴포넌트에서 리렌더링 되지 않는다. 컴포넌트에서의 상태는 상태를 바꾸는 함수를 호출하고 나서 그 다음 렌더링 이후 업데이트 된 상태를 조회할 수 있는 반면, useRef로 관리하고 있는 변수는 설정 후 바로 조회가 가능합니다.

이 변수를 사용하여 다음과 같은 값을 관리 할 수 있습니다.

• setTimeout, setInterval 을 통해서 만들어진 id
• 외부 라이브러리를 사용하여 생성된 인스턴스
• scroll 위치

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

function Inputs(){
  console.log(useState);
  const [name, setName] = useState("")
  const nameInput = useRef();// nameInput 객체생성 useRef();호출

  const  onChange = (e) => {
    setName(e.target.value)
  }
  const onRest = () => {
    setName("");
    nameInput.current.focus();//focus api 사용 //curre
  }
  return (
    <div>
      <input placeholder="이름"  onChange ={onChange} value={name} ref={nameInput}/>
      <button onClick={onRest}>초기화</button><br/>
      이름: {name}
    </div>
  )
}

useRef() 를 사용하여 Ref 객체를 만들고, 객체를 선택하고 싶은 DOM 에 ref 값으로 설정해주어야 합니다. 그러면, Ref 객체의 .current 값은 원하는 DOM 을 가르키게 됩니다.