상태 관리, useState()

상태(state)란 무엇인가요 ?

state란 React 컴포넌트의 상태를 의미합니다. 컴포넌트의 기억 저장소라고 생각할 수 있습니다. 예를 들면 쇼핑몰에서 찜 버튼을 클릭하면 해당 상품이 나의 찜 목록에 추가되는 동작처럼 동적으로 변경되어야 하는 데이터를 사용할 때에 state를 사용합니다.

쉽게 말하면, 컴포넌트의 변경할 수 있는 데이터는 state입니다. state가 변경되면 컴포넌트는 리 렌더링되기 때문에 데이터 흐름에 사용되는 값만 ****state에 포함해야 합니다.

간단한 예시코드를 함께 살펴보며, 상태에 대해 알아보겠습니다.

export default function Counter() {
	let count = 0;
	
	function onIncrease() {
		count += 1;
		console.log(count);
	}

	function onDecrease() {
		count -= 1;
		console.log(count);
	}

	return (
		<div>
			<p>Count : {count}</p>
			<button onClick={onIncrease}>+1</button>
			<button onClick={onDecrease}>-1</button>
		</div>
	);
}

각각 버튼을 클릭하면, 변수 count의 값이 1씩 증가하거나 감소할 것입니다.

화면에 나오는 결과를 살펴볼까요?

콘솔창에서는 count 값이 변화하고 있지만, 화면에서는 값의 변화가 일어나지 않고 있습니다.
React에서는 컴포넌트 내부에 정의한 지역 변수의 값이 변경되더라도, 컴포넌트를 리 렌더링 하지 않습니다. 따라서 저희는 값이 변경되면 리 렌더링을 통해 동적으로 변화한 값을 화면에 나타내기 위해 state(상태)를 사용해야 합니다.

useState()

useState는 React에서 상태 관리를 위해 사용하는 Hook 중 하나입니다.

Hook이 무엇인가요 ?

Hook은 기본적으로 함수이지만, 일반 함수와는 달리 함수 컴포넌트에 추가적인 기능을 제공하는 역할을 수행합니다. 추가적으로 학습하고 싶으시다면, 하단의 문서를 학습하는 것을 권장합니다.

state는 컴포넌트의 상태를 나타내며, 상태가 변경될 때마다 React는 해당 컴포넌트를 다시 렌더링합니다.

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

매개변수

initialState는 state 초기 설정값입니다. 어떤 유형의 값이든 지정할 수 있습니다.

반환 값

useState는 두 개의 값을 가진 배열을 반환합니다.

첫 번째로는 상태값인 state를 반환하고, 두 번째로는 상태 값을 업데이트하는 함수를 반환합니다.

예시 코드

예를 들어, 컴포넌트에서 숫자를 저장하고 업데이트할 수 있는 상태를 만들고 싶다고 가정해 보겠습니다.

import React, { useState } from 'react';
import './App.css';

export default function ClickNum() {
  const [num, setNum] = useState(0);
  return (
    <div>
      <p>클릭 횟수 : {num}</p>
      <button onClick={() => setNum(num + 1)}> Click! </button>
    </div>
  );
}

초기 값 0으로 상태 값이 지정되어 있다가 버튼이 클릭 되면, set 함수가 실행되어 ClickNum컴포넌트는 자동으로 렌더링하여 변경된 상태 값을 화면에 반영합니다.

버튼이 클릭 될 때마다 렌더링이 발생하기 때문에 해당 결과에서는 총 10번의 렌더링이 발생한 것입니다.
set 함수가 실행될 때마다 num의 값이 1씩 증가하는 것을 확인할 수 있습니다.

사용 시 주의 사항

1. useState 로 관리되는 상태를 직접 수정하면 안 됩니다.

   상태 값을 업데이트하려면 반드시 set 함수 (상단 예제의 경우 : setName)를 사용하여 업데이트해야 합니다.

2. 반드시 컴포넌트 최상단 층 위에서만 호출해야 합니다.

   다음과 같은 useState()는 허용되지 않습니다.

   • 조건문 내에서 사용하는 경우

   function App() {
   	if(num === 1) {
   		const [number, setNumber] = useState(0);
   	}
   }

   • 반복문 내에서 사용하는 경우

   function App() {
     while (num < 9) {
      const [number, setNumber] = useState(0);
     }
   }

3.  React 함수형 컴포넌트 내부에서만 불러야 합니다.

   앞서 학습한 클래스형 컴포넌트의 경우 hook이 없어도 잘 동작하기 때문에, hook을 사용할 수 없습니다.

4. useState를 사용하는 경우 import문을 사용하여 호출되어야 합니다.

import { useState } from 'react'; // 중괄호로 감싸 호출해야합니다.

참고 자료

• React : 기본 Hook