[React] useState를 통한 동적 상태 관리

useState란?

useState는 React에서 상태(state)를 관리하기 위한 Hook 중 하나로, 함수형 컴포넌트에서 상태를 관리하는 데 사용됩니다.
useState를 사용하면 컴포넌트 내에서 상태 변수를 선언하고 해당 상태 변수를 업데이트할 수 있으며, 상태가 변경될 때 React는 컴포넌트를 다시 렌더링 합니다.

 

 

Hook이란?
React Hook은 React 버전 16.8부터 도입된 개념으로, 함수형 컴포넌트에서 상태(state) 및 생명주기 관련 기능을 사용할 수 있도록 하는 기술입니다.이전에는 클래스 컴포넌트에서만 상태 및 생명주기 관련 로직을 다룰 수 있었지만, Hook을 사용하면 함수형 컴포넌트에서도 이러한 기능을 간편하게 활용할 수 있게 되었습니다.

State란?
State는 컴포넌트의 상태를 나타내며, 컴포넌트가 렌더링 되는 동안 변할 수 있는 데이터(동적인 상태) 를 포함합니다. State는 주로 사용자 입력, 외부 데이터 가져오기, 컴포넌트의 상태 변화 등을 처리하는 데 사용됩니다.

useState 사용 예시

import React, { useState } from 'react';

function MyComponent() {
  // useState를 사용하여 상태 변수와 해당 상태 변수를 변경하는 함수를 선언
  const [count, setCount] = useState(0);

  return (
    <div>
	//현재의 상태값 count
      <p>Count: {count}</p>
      // 상태 변경 함수 setCount로 1씩 증가
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyComponent;

 

여기서 useState는 배열을 반환하며,
배열의 첫 번째 요소는 현재의 상태 값(count)이고,
두 번째 요소는 해당 상태를 변경할 수 있는 함수(setCount)입니다.
초기 상태 값은 useState 함수의 매개변수로 전달됩니다.

• 상태 변경: 상태를 변경하려면 해당 상태를 변경할 수 있는 함수를 호출해야 합니다. 이 함수를 호출하면 React는 새로운 상태로 컴포넌트를 다시 렌더링 합니다.
• 함수 호출과 랜더링: useState를 사용하여 상태를 변경하는 함수를 호출하면 컴포넌트가 다시 렌더링 됩니다. 상태가 변경되면 해당 상태와 관련된 부분만 다시 렌더링됩니다.

React의 핵심인 상태와 뷰를 연결하고, 상태가 변경될 때 뷰가 업데이트되는 개념을 나타냅니다. React는 상태를 업데이트할 때 가상 DOM을 통해 변경 사항을 효율적으로 감지하고, 변경된 부분만 실제 DOM에 반영합니다. 이렇게 함으로써 DOM 조작을 효율적으로 처리할 수 있습니다.