[React] useState로 button과 input 관리하기

State

• state는 리액트에서 데이터 값을 저장하는 객체이다.
• state가 아닌 변수에 저장하고 데이터를 변화시키면 update 작업이 일어나지 않아 변수의 변화가 렌더링 되지 않는다.
• 함수형 컴포넌트에서는 state를 사용할 때 useState라는 훅을 사용한다.

 

useState

• 먼저 아래에 index.js가 있다는 가정하에 코딩하겠다.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

• useState라는 훅은 배열을 반환한다.
• 첫 번째 값은 데이터의 값
• 두 번째 값은 데이터 값을 수정할 수 있게 해주는 함수

button 관리

+1 버튼을 누르면 숫자가 증가하고, -1 버튼을 누르면 숫자가 감소하는 앱을 만들어보자.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [number, setNumber] = useState(0);
  console.log(useState);
  return (
    <div >
      <div>{number}</div>
      <button>+1</button>
      <button>-1</button>
    </div>
  );
}​

• useState를 이용해 number라는 state변수와 number을 수정하는 setNumber 함수를 얻었다.
• 브라우저에는 number의 값과 +1,-1 버튼이 렌더링 되게 했다.
• 이제 button에 click 이벤트 발생 시 동작할 함수를 지정해주면 된다.

import { useState } from "react";
export default function App() {
  const [number, setNumber] = useState(0);
  const handleIncrease = () => {
    setNumber((current) => current + 1);
  };
  const handleDecrease = () => {
    setNumber((current) => current - 1);
  };
  console.log(useState);
  return (
    <div>
      <div>{number}</div>
      <button onClick={handleIncrease}>+1</button>
      <button onClick={handleDecrease}>-1</button>
    </div>
  );
}

• +1 버튼을 누르면 number 증가
• -1 버튼을 누르면 number 감소
• 수정하게 해주는 setNumber 함수를 통해 number 값을 바꾼다.

Modify 함수 사용법

기존 값과 상관없는 값으로 수정할 때

setState('apple');

• 이때는 새로운 값을 인자로 전달하면 바로 수정된다.

기존 값을 이용하여 값을 수정할 때

setState((current)=>current+1);

• 위의 앱처럼 기존 값을 이용하여 값을 수정할 때는 기존 값을 인자로 전달한 함수를 통해 수정하는 게 좀 더 안전하다.

Input 관리

input에 이름을 입력하면 이름을 포함한 문구를 띄워주는 앱을 만들어보자.

export default function App() {
  return (
    <div>
      <div>
        <input placeholder="이름을 입력하시오" />
      </div>
      <button>초기화</button>
      <button>등록</button>
    </div>
  );
}

• 먼저 이름을 입력할 input 을 만들어준다.
• 입력값을 초기화 해줄 버튼을 만든다.
• 이름을 등록해줄 버튼을 만든다.

State

위의 기능을 구현하기 위해 사용해야 할 state들

1. text state : input에 입력하는 값들을 저장할 text state가 필요하다.
2. name state : 등록 버튼을 눌렀을 때의 text값을 저장할 name state가 필요하다.

Function

위의 기능을 구현하기 위해 필요한 함수들

1. handleChange : 입력하는 text를 text 값에 넣어줄 함수
2. handleRest : 초기화 버튼을 눌렀을 때 input을 초기화해줄 함수
3. handleConfirm : 등록 버튼을 눌렀을 때의 text 값을 name 값에 넣어줄 함수

import { useState } from "react";
export default function App() {
  const [text, setText] = useState("");
  const [name, setName] = useState("");
  const handleChange = (event) => {
    setText(event.target.value);
  };
  const handleReset = () => {
    setText("");
  };
  const handleConfirm = () => {
    setName(text);
  };
  return (
    <div>
      <div>
        {name === "" ? (
          <input
            onChange={handleChange}
            placeholder="이름을 입력하시오"
            value={text || ""}
          />
        ) : (
          <div>{name}님 환영합니다!</div>
        )}
      </div>
      <button onClick={handleReset}>초기화</button>
      <button onClick={handleConfirm}>등록</button>
    </div>
  );
}

• 앞서 언급한 기능들을 모두 구현했다.

input value 관리

handleChange에서 event 인자를 통해 어떻게 입력값을 얻었을까?

• input 태그에서 발생하는 Change 이벤트를 콘솔 창을 통해 보자.

event를 콘솔창에 띄웠을 때 원래 이벤트 객체인 nativeEvent

• nativeEvent 객체 내부에 target 객체가 있고, 그 안에 입력값인 value값이 있다.