useState

컴포넌트에서 보여줘야 하는 내용이 사용자의 인터랙션에 따라 바뀌어야 할 때 동적으로 어떻게 구현할 수 있는지 알아보자.

 

State란?

먼저 State란 컴포넌트가 가질 수 있는 상태를 말한다. 

❗️ 여기서 상태란 컴포넌트에서 동적인 값을 말한다.

예를 들어, 시간이라는 컴포넌트가 있다면 state로 현재 시간을 가질 수 있다.

 

---

사용법

react Hooks의 useState라는 함수는 컴포넌트의 state를 간편하게 생성하고 업데이트를 시킬 수 있게 해주는 도구를 제공한다.

즉, 컴포넌트에서 상태를 관리 할 수 있다는 이야기이다.

useState를 사용하기 위해서는 react에서 useState를 import 받아야한다.

이 코드는 리액트 패키지에서 useState라는 함수를 불러와주는 역할을 한다.

import { useState } from 'react';

 

그 후, 변수 선언을 해주어야 하는데 아래처럼 state의 생성과 동시에 가져야 할 초기값(기본값)을  useState함수의 매개변수로 넣어 주고 호출해주면 state와 setState라는 두 가지 요소를 배열 형태로 리턴해준다. 여기서 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수이다.

state명은 알맞게 설정하면 되고 두번째 요소에 set을 붙여주면 된다.

const [state, setState] = useState(초기값);

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

 

---

state의 값을 변경하고 싶다면?

setState 함수를 불러서 인자에는 변경될 값을 넣어주면 된다.

// state의 값을 2로 변경
setState(2);

setState 함수를 이용해서 state의 값을 변경하면 해당 컴포넌트는 화면에 다시 렌더링 되어서 state가 변경될 때마다 화면이 업데이트된다.  예를 들어, state가 시간이라고 한다면 시간이 변경 될 때마다 화면이 렌더링 된다고 생각하면 된다.

 

Setter 함수를 사용할 때 , 위와 같이 새로운 값을 파라미터로 넣어주는 방법도 있지만

기존 값을 어떻게 업데이트 할 지에 대한 함수를 등록하는 방법으로도 값을 업데이트 할 수 있다. 

 

새로운 값을 파라미터로 넣어주는 예시

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

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

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

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

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

export default Counter;