[React] React Form (추가 이벤트 핸들링)

이전에는 간단한 React 이벤트 핸들링에 대해서 정리해보았습니다.
이번에는 그보다 조금 더 심화적인 형식에 대해서 정리해보겠습니다.

웹 앱을 만들 때 로그인, 등록, 접근을 위한 형식을 만드는 것은 아주 흔한 작업이라고 볼 수 있습니다.
그리고 이 형식이 어떻게 동작하는지 이해하려면 상태를 설정하고 사용하는 법을 알아야 합니다.
그래서 이번에는 입력 요소로 사용자가 입력하는 값을 얻는 방법과 사용자가 입력한 정보를 사용하기 위해 버튼을 사용하는 방법을 살펴보겠습니다.

버튼을 클릭했을 때 onClick과 같은 속성을 통해 이벤트를 제어하는 것처럼 입력하는 동작에 있어서도 이벤트가 존재합니다.
input 태그 안에 onChange라고 하는 속성을 사용하면 입력값이 바뀔 때마다 매번 트리거가 작동되어 사용자가 내부에 뭔가를 새로 타이핑되게 됩니다.

 

 

App.jsx

import React from "react";

function App() {

function handleChange(){
  console.log("change");
}

  return (
    <div className="container">
      <h1>Hello </h1>
      <input onChange={handleChange} type="text" placeholder="What's your name?" />
      <button>Submit</button>
    </div>
  );
}

export default App;

예시 코드를 보면 input 태그에 onChange 속성을 추가하고 handleChange 함수를 넣어 입력할 때마다 콘솔에 텍스트가 찍히게끔 만들어주었습니다.

 

 

 

onChange를 통해 함수를 호출하고 특정 이벤트를 동작시킨 것은 확인했습니다.
하지만 onChange를 사용한 이유는 input 태그에 어떤 값이 입력되었다는 것을 확인하고 싶기 위해 사용하는 것입니다.

 

App.jsx

import React from "react";

function App() {

  function handleChange(event){
    console.log(event.target.value);
    console.log(event.target.placeholder);
    console.log(event.target.type);
  }

  return (
    <div className="container">
      <h1>Hello </h1>
      <input onChange={handleChange} type="text" placeholder="What's your name?" />
      <button>Submit</button>
    </div>
  );
}

export default App;

onChange를 통해 handleChange 함수를 호출하는 데, 처음에는 아무런 매개변수가 없는 기본적인 함수였습니다.
만약 입력한 input 태그의 값 및 기타 속성들의 정보를 알고싶다면 해당 함수에 매개변수를 넣어주기만 하면 입력받은 값이나 속성값들을 확인할 수 있습니다.

따라서 위의 예시코드를 보았을 때, 매개변수 event 변수가 input 태그의 정보들을 가지고 있다고 볼 수 있습니다.
target 키워드를 통해 어떤 정보를 확인할 것인지 지정해주게 되는데, target.value는 입력한 값을, target.placeholder는 placeholder 속성 정보를, target.type은 type의 정보를 확인 할 수 있습니다.

 

 

 

만약 그렇다면 사용자가 앱이나 구성 요소 안에 입력된 input 값을 사용하고 싶다면 어떻게 하면 좋을까요?

 

App.jsx

import React, { useState } from "react";

function App() {

  const [headText, setHeadText] = useState("Hello");
  
  function handleChange(event){
    setHeadText(event.target.value);
  }

  return (
    <div className="container">
      <h1>{headText}</h1>
      <input onChange={handleChange} type="text" placeholder="What's your name?" value={headText}/>
      <button>Submit</button>
    </div>
  );
}

export default App;

그렇다면 useState를 통해 렌더링되는 내부 앱 구성요소에 적용할 수 있습니다.
useState를 사용해 초기의 값, 반영될 값을 설정한 뒤 input 태그의 동작함수인 handleChange 함수에 반영될 값에 event 변수값을 넣어주게 되면 return 되는 내부 구성 앱 내용에 적용시킬 수 있습니다.

이렇게 되면 반영된 headText 변수가 h1 태그 내용으로서 적용이 되는 데, 이때 입력한 input 값(headText)을 해당 input 태그에도 value 속성으로서 가지고 있어야 합니다.
이걸 React 용어로 제어 구성 요소라고 합니다.
제 개인적으로 알기 쉽게 이해하기로는 입력한 값을 반영된 곳에만 넣어두는 것이 아니라 입력받은 input 태그에도 자신의 값을 구분하기위해 설정해놓는 것이라고 이해하면 될 것 같습니다.

 

 

 

useState를 통해 실시간으로 내부 구성 내용에 값을 사용하여 적용하는 부분까지 만들어 보았습니다.
이번에는 입력하고나서 버튼을 눌렀을 때만 내용이 반영되게 구성해보겠습니다.

 

App.jsx

import React, { useState } from "react";

function App() {

  const [headText, setHeadText] = useState("");
  const [name, setName] = useState(""); // 버튼 클릭용 useState
  
  function handleChange(event){
    setHeadText(event.target.value);
  }

  // 버튼 클릭 시 동작될 함수수
  function handleClick(){
    setName(headText);
  }

  return (
    <div className="container">
      <h1>Hello {name}</h1>
      <input onChange={handleChange} type="text" placeholder="What's your name?" value={headText}/>
      <button onClick={handleClick}>Submit</button>
    </div>
  );
}

export default App;

시나리오는 이렇습니다.
입력받으면 입력받은 값을 useState 변수에 저장해놓고 버튼용 useState 변수를 만들어놓은 뒤,
버튼을 클릭하게 되었을 때 특정 함수가 동작되면서 입력용 useState 변수에 저장된 값을 버튼용 useState에 반영되게 하여 내부 구성 내용에 적용되게 하는 것입니다.

(1) 우선 useState 변수를 하나 더 추가해줍니다.
기존의 useState 변수는 입력용 useState 변수이고, 이번에는 버튼을 눌렀을 때 필요한 useState 변수입니다.
(2) 입력받자마자 반영되는 것이 아니라 버튼을 입력했을 때 반영되기 위해 h1 태그의 변수명을 버튼용 useState 변수명으로 변경해줍니다.
(3) 버튼을 눌렀을 때 이벤트가 동작이 되야 하므로 버튼에 onClick 속성을 추가해주어 동작시킬 함수를 넣어줍니다.
(4) 클릭 시 동작될 함수인 handleClick 을 만들어줍니다.
별다른 내용이 필요한 것이 아니라 실제로 내부 구성 내용에 반영되게 하기 위해 useState의 수정 변수 로직을 넣어줍니다.

끝났습니다.
이제 입력하고 submit 버튼을 누르면 눌렀을 때에만 적용되어 보여지게 됩니다.

 

버튼 클릭 전 / 버튼 클릭 후