[React] 리액트 useState()를 통해 컴포넌트 상태 관리하기

작업환경

$ npm install -g create-react-app
$ create-react-app 프로젝트파일명

해당 포스팅은 VScode에서 create-react-app을 통해 만들어진 React 파일에서 작업한 내용입니다.

 

 

리액트 16.8 이전 버전에서 함수형 컴포넌트는 상태를 관리할 수 없었으나, 리액트 16.8 버전에서 Hooks라는 기능이 도입되면서 함수형 컴포넌트에서도 상태 관리가 가능하게 되었습니다!

useState() 함수는 리액트 Hooks에서 제공되는 컴포넌트 상태 관리 함수인데 기초적인 예제인 Counter 예제를 통해서 한번 알아보도록 하겠습니다.

 

App.jsx

import React from "react";
import Counter from "./components/Counter";

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

export default App;

Counter.jsx

import React, { useState } from "react";

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  };
  const onDecrease = () => {
    setNumber(number - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

 

import React, { useState } from "react";

리액트 패키지에서 useState 함수를 불러옵니다.

 

const [number, setNumber] = useState(0);

useState함수 호출 시 배열이 반환되는데 첫 번째 원소는 현재 값, 두 번째 원소는 Setter함수입니다.
보통 배열의 비구조화 할당을 통해서 위와 같이 표현을 하며 위와 아래의 코드는 동일한 코드입니다.

 

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

 

 

그리고 useState(0)에 들어가 있는 파라미터 0은 상태(number)의 기본값을 0으로 설정하겠다는 의미입니다.

 

const onIncrease = () => {
    setNumber(number + 1);
  };
  const onDecrease = () => {
    setNumber(number - 1);
  };

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );

+1 버튼 -1 버튼을 누르면 onClick이벤트로 각각 onIncrease, onDecrease 함수가 실행되는데
Setter함수인 SetNumber 함수는 파라미터로 전달받은 값을 최신 상태로 설정해줍니다.

 

함수형 업데이트

지금까지 Setter함수를 사용해서 업데이트하고 싶은 값을 파라미터로 넣어주고 있지만, 그 대신에 값을 어떻게 업데이트할 지에 대한 함수를 넣어서 값을 업데이트할 수 도 있습니다.

  const onIncrease = () => {
    setNumber((preNumber) => preNumber + 1);
  };
  const onDecrease = () => {
    setNumber((preNumber) => preNumber - 1);
  };

onClick이벤트 시 그다음 상태를 파라미터로 넣어주는 것이 아닌 위와 같이 값을 업데이트하는 함수를 파라미터로 넣어주었습니다.

 

 

 

📚참고

https://react.vlpt.us/basic/07-useState.html