[React] useState

useState

React의 hooks중 하나입니다. 

상태를 동적으로 관리할 때 사용합니다.

 

예제를 통해서 useState를 알아보겠습니다. 

 

App.js

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


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

export default App;

 

Counter.js

import React, { useState } from "react";

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

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

  const onDecrease = () => {
    setNumber((prevNumber) => prevNumber - 1); // (2)
  };

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

export default Counter;

 

 

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

위 코드를 분석해보자면, number라는 상태를 생성하는데 그 상태의 기본 값(초기 값)은 0입니다.

 

setNumber는 number의 상태를 바꿔주는 함수입니다.

 

원래는 이 코드가

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

이런 구조를 가지고 있습니다. 배열 비구조화 할당을 통해서 한줄로 짧게 작성 가능합니다.

 

useState 가 호출되었을 땐, 배열을 반환하게 되는데, 첫 번째 원소를 number란 이름으로 추출하고

두 번째 원소를 setNumber란 이름으로 추출하겠다는 것입니다.

 

 

 

(2)setNumber( (prevNumber) => prevNumber - 1);

 

위 코드는 마이너스 이벤트 구현을 이렇게 함수형 업데이트로 할 수 있다는 것을 보여주는 것입니다.

 

setNumber(number - 1); 이렇게 현재 number값에 빼줘도 가능합니다.

 

여러가지 방법이 있으니 참고로 알아두면 좋습니다. 함수형 업데이트는 훗날 최적화와 관련이 있으니 알아두면 좋을것입니다.

 

 

 

(3)onClick={onIncrease}

자바스크립트는 onclick으로 on다음 소문자가 오지만 React는 on 다음 대문자가 옵니다. (onClick)

그리고 주의할 점이 있습니다.

 

함수를 onClick 이벤트에 넣어주는 거지 호출하면 안됩니다.

즉, onIncrease() 이런 식으로 호출하면 안됩니다. 

 

 

 

 

참고 강의

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

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