[리액트] 1. useState

 useState

useState는 React의 내장 hook 함수 중 하나로, 함수형 컴포넌트에서 상태를 관리하기 위해 사용됩니다. useState는 배열을 반환하며 첫 번째 요소는 현재 상태값을, 두 번째 요소는 상태를 갱신하는 함수를 포함합니다. 보통 리액트에서 상태관리라고 하면 제일 먼저 떠오르는게 useState 를 이용한 기본적인 상태관리 방식이라고 볼 수 있습니다.

 

예를 들어, 간단한 숫자를 더하는 컴포넌트를 만들어보겠습니다. 이 컴포넌트에서는 useState를 사용하여 현재 상태값을 저장하고, 버튼을 클릭할 때마다 상태값을 갱신하고 화면에 출력합니다.

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
 //      현재상태   ㄴ현재상태 변경 함수

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

(참고) 리액트에서 useState의 변수와 함수를 보면 const [변수, set변수]  인 것을 볼 수 있습니다. 관례상 state에 해당하는 변수명, 해당 변수를 업데이트하는 함수는 set변수명 형태로 작성합니다.

 

이 코드에서 useState의 첫 번째 인자로 초기값 0을 전달했습니다. count 변수는 현재 상태값을 저장하며, setCount 함수를 사용하여 상태를 갱신합니다. handleClick 함수에서는 setCount를 호출하여 count 값을 1씩 증가시키고, 버튼 클릭 시 handleClick 함수가 호출됩니다.

 

위 코드를 실행하면, 버튼을 클릭할 때마다 "You clicked [count] times" 메시지가 갱신되며, count 값이 증가합니다. 이와 같이 useState를 사용하면 함수형 컴포넌트에서도 상태값을 간편하게 관리할 수 있습니다.

 

 

잠깐 더 살펴보기

useState 은 리액트 내에서 지역적으로 실행됩니다. 다시 말해, state 를 선언하는 컴포넌트 외에서는 완전히 비공개 되어 있기에, 외부 컴포넌트에서는 state 를 수정할 수 없습니다. 이는 반대로 자신이 선언된 컴포넌트를 제외하고는 외부에 어떠한 영향도 미치지 않으므로 다른 컴포넌트에 영향을 주지 않은 상태에서 state를 추가하거나 제거할 수 있습니다. 만약에 지역적으로 선언된 state 를 다른 컴포넌트와 공유하고자 한다면, 해당 state 변수를 자식 컴포넌트의 props 로 전달해주면 됩니다. 그럼 자식 컴포넌트는 props 속성에 접근하여 상위 컴포넌트로 부터 전달받는 state 를 사용할 수 있게 됩니다.