[React] input 상태 관리하기 / 여러개의 input 상태 관리하기 / useRef

input 상태 관리하기

간단하게 React에서 Input 태그 안의 상태를 관리하는 법을 알아보겠습니다. 

 

먼저 결과 코드입니다. 

 

App.js

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

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

export default App;

 

InputSample.js

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 /> 태그입니다. <input /> 태그 안에 value 값을 설정해주는 것이 중요합니다. 그래야 초기화 버튼을 클릭했을 때, input 태그 안의 상태도 같이 비워지기 때문입니다. 

 

간단하게 코드를 설명해보자면, 

 

<input /> 태그 안에 글자를 작성하면 작성하는 대로 setText() 함수가 동작하여 그 값이 text가 됩니다. 그래서 {text}로 작성된 코드에 해당 값이 들어가게 됩니다. 

 

<button /> 태그를 클릭하였을 경우에는 onReset() 함수가 동작하여 setText(""); 코드를 통해서 {text} 값을 비워주게 됩니다. 

 

그래서 <input /> 태그 안에 value 값을 삭제한다면 <div> 태그 안에 존재하는 {text} 값은 비워지겠지만 <input /> 태그 안의 값은 비워지지 않게 됩니다. 

 

결과 화면 

input에 값을 넣었을 때

 

초기화 버튼 눌렀을 때

 

input 태그 안에 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 { 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; 이런식으로 직접 수정하면 안됩니다. 

 

그 대신에, 새로운 객체를 만들어서 기존 객체를 복사 후, 새로운 객체에 변화를 주고 이를 상태로 사용해주어야합니다. 

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

참고로 ...문법은 Spread 문법입니다. 객체의 내용을 모두 "펼쳐서" 기존 객체를 복사해줍니다. 

 

이러한 작업을, "불변성을 지킨다" 라고 부릅니다. 불변성을 지켜주어야만 리액트 컴포넌트에서 상태가 업데이트가 됐음을 감지 할 수 있고 이에 따라 필요한 리렌더링이 진행됩니다.

 

만약에 inputs[name] = value 이런식으로 기존 상태를 직접 수정하게 되면, 값을 바꿔도 리렌더링이 되지 않습니다.

 

추가적으로, 리액트에서는 불변성을 지켜주어야만 컴포넌트 업데이트 성능 최적화를 제대로 할 수 있습니다. 

 

리액트에서 객체를 업데이트하게 될 때에는 기존 객체를 직접 수정하면 안되고, 새로운 객체를 만들어서, 새 객체에 변화를 주어야 되는 것이 중요하게 여겨지는 부분입니다. 

 

 

useRef로 특정 DOM 선택하기

JavaScript 를 사용 할 때에는, 우리가 특정 DOM 을 선택해야 하는 상황에 'getElementById' , 'querySelector' 같은 DOM Selector 함수를 사용해서 DOM을 선택합니다.

 

리액트를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 발생 할 때도 있습니다.

 

예를 들어서 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등 정말 다양한 상황이 있습니다.

 

추가적으로 Video.js, JWPlayer 같은 HTML5 Video 관련 라이브러리, 또는 D3, chart.js 같은 그래프 관련 라이브러리 등의 외부 라이브러리를 사용해야 할 때에도 특정 DOM 에다 적용하기 때문에 DOM 을 선택해야 하는 상황이 발생 할 수 있습니다.

 

그럴 때, 리액트에서는 ref 라는 것을 사용합니다.

 

함수형 컴포넌트에서 ref 를 사용 할 때에는 useRef 라는 Hook 함수를 사용합니다.

 

한번, 초기화 버튼을 클릭했을 때 이름 input 에 포커스가 잡히도록 useRef 를 사용하여 기능을 구현해보겠습니다.

 

InputSample.js

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

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

  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: ''
    });
    nameInput.current.focus();
  };

  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;

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

 

위 예제에서는 onReset 함수에서 input 에 포커스를 하는 focus() DOM API 를 호출해주었습니다.

 

 

 

 

강의 링크

 

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스 (fastcampus.co.kr)

프론트엔드 개발 올인원 패키지 with React Online. | 패스트캠퍼스