React - input, useRef

input에 글을 입력하면 문자로 출력하기 + 초기화 시키기

App.jsx

import './App.css';
import Input from './components/Input';

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

export default App;

Input.jsx

import React, {useState} from 'react'

const Input = () => {
    const [text, setText] = useState("");
    
    const onChange = (e) => {
        setText(e.target.value);
    }

    const onReset = () => {
        setText('');
    }
  return (
    <>
        <input type="text" onChange = {onChange} value = {text}/>
        <button onClick = {onReset}>초기화</button>
        <div>
            입력값 : {text}
        </div>
    </>
  )
}

export default Input

onChange

폼 필드가 변경될 때 이벤트가 발생.

2개의 input 이용하기

Input.jsx

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

const Input = () => {
    const [inputs, setInputs] = useState({
        id : '',
        nick :''
    });
    const focusInput = useRef(); 
    const {id, nick} = inputs;

    const onChange = (e) => {
        const {name, value} = e.target;
        console.log('name type',typeof name);

        const nextInputs = {
            ...inputs,
            [name]:value
        }
        setInputs(nextInputs);
    }

    const onReset = () => {
        setInputs({
            id:'',
            nick:''
        })
        focusInput.current.focus();
    }
  return (
    <>
        <input name = "id" placeholder = "아이디" onChange = {onChange} value = {id}
        ref = {focusInput}/>
        <input name = "nick" placeholder = "닉네임" onChange = {onChange} value = {nick}/>
        
        <button onClick = {onReset}>초기화</button>
        <div>
            입력값 : {id}{nick}
        </div>
    </>
  )
}

export default Input

const focusInput = useRef(); //focusInput이라는 객체를 생성.focusInput에 ref객체를 반환

const {id, nick} = inputs; //구조분해할당. id, nick 변수 선언. inputs객체의 key값과 동일하게 작성해줌.

const nextInputs = {...inputs} // inputs 객체를 복사하는 방법.

[name]:value // 복사한 inputs객체를 덮어 쓰는 방법. 문자열을 객체의 키 값으로 하기 위해 [] 사용

focusInput.current.focus() // 부여한 id처럼 input요소에 접근. current는 input을 가리킴. focus함수 호출.

useRef

const refContainer = useRef(initialValue);

react에서 제공하는 hook 중 하나.
.current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref객체 반환
반환된 객체는 component에서 유지
.current 프로퍼티에 변경 가능한 값을 담음.
특정 돔을 선택해야 할때 useRef hook사용

Ref

HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 ReactProject 내부에서 DOM에 이름을 다는 방법.
render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공
props는 부모 컴포넌트가 자식과 상호작용할 수 있는 유일한 수단 -> 일반적인 데이터 플로우에서 벗어나 직접적으로 자식을 수정해야 하는 경우 -> Ref사용

Ref 사용 상황(직접적으로 DOM을 건드림)

특정 input에 포커스 주는 경우

스크롤 박스를 조작하는 경우

Canvas 요소에 그림을 그리는 경우

객체 spread

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

출처 :
Ref와 DOM
ref 속성
전개 구문