지금까지는 값이 변하지 않는 정적인 리액트 컴포넌트를 만들었지만, 사용자의 행위나 시간 변동에 따라 값이 변하는 동적 리액트 컴포넌트도 알아야 한다. 이를 위해서 리액트의 핵심 기능 중 하나인 State에 대해 알아본다.

State 기본 사용법

useState로 State 생성하기

리액트에서는 함수 useState()로 State를 생성한다.

const [state, setState] = useState(0);

useState() 함수를 호출하면 2개의 요소가 담긴 배열을 반환한다.

• State 변수 - 현재 상태의 값을 저장하고 있는 변수
• set 함수 - State 변수의 값을 변경하는 함수 (상태 업데이트하는 함수)

State는 반드시 컴포넌트 함수 안에서 만들어야 한다.

useState(초기값)에서 인자로 전달된 값을 상태의 초기값으로 사용한다. 하지만 이후 set 함수에 의해 상태의 값이 변경되었다면, 다음 렌더링에서는 그 상태를 유지한다.

useState는 리액트가 제공하는 State를 만드는 함수다. 이를 만들기 위해 코드 내부에

import { useState } from “react”; 를 통해 useState를 리액트 라이브러리에서 불러와야 한다. state 변수를 변경하려면 반드시 useState() 함수를 호출해서 변경해야 한다.

set 함수로 State 값 변경하기

import { useState } from "react";

function Body() {
  const [count, setCount] = useState(0); 

  const onIncrease = () => { ①
    setCount(count + 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={onIncrease}>+</button>
    </div>
  );
}
export default Body;

set 함수를 호출해 State 값을 변경하면, 변경 값을 페이지에 반영하기 위해 컴포넌트를 다시 렌더링한다. 리액트에서는 이것을 ‘컴포넌트의 업데이트’라고 표현한다.

컴포넌트가 페이지에 렌더링하는 값은 컴포넌트 함수의 반환값이다. 따라서 컴포넌트를 다시 렌더링한다는 뜻은 컴포넌트 함수를 다시 호출한다는 의미와 같다.

State 값이 변해 컴포넌트를 다시 렌더링하는 것을 ‘리렌더’ 또는 ‘리렌더링’이라고 한다. 리액트 컴포넌트는 자신이 관리하는 State 값이 변하면 자동으로 리렌더된다.