앱개발 종합반 3주차 - useState 추가 정리

동적인 값 끼얹기, useState

컴포넌트에서 동적인 값을 상태(state)라고 부릅니다. 리액트에 useState 라는 함수가 있는데요, 이것을 사용하면 컴포넌트에서 상태를 관리 할 수 있습니다.

Counter 컴포넌트를 다음과 같이 수정해보세요.

Counter.js

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];

배열 비구조화 할당을 통하여 각 원소를 추출해준것입니다.

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

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

Setter 함수는 파라미터로 전달 받은 값을 최신 상태로 설정해줍니다.

    <h1>{number}</h1>

h1 태그에서는 이제 0 이 아닌 {number} 값을 보여주어야 합니다.

코드를 다 수정 후, 버튼들을 눌러보세요. 숫자가 잘 바뀌고 있나요?

 

출처 : https://react.vlpt.us/basic/07-useState.html?q=