useState

사용법

 

1. 기능을 쓰려면 쓴다고 파일 상단에 외침. import { useState } from 'react';

2. const [변수명, 변수명 변경 함수] = useState(변수초기값)

 

 

https://ko.react.dev/reference/react/useState

useState – React

배열 구조 분해를 사용하여 [something, setSomething]과 같은 state 변수의 이름을 지정하는 것이 규칙입니다.

useState는 React에서 컴포넌트 상태를 관리하기 위해 사용하는 Hook입니다. 컴포넌트의 상태는 UI와 상호작용할 때 변경되는 값을 의미하며, 이러한 값이 변할 때마다 React가 컴포넌트를 다시 렌더링하여 화면을 업데이트합니다.

 

React 함수형 컴포넌트는 기본적으로 상태를 가지지 않지만, useState를 사용하면 함수형 컴포넌트에서도 상태를 관리할 수 있습니다.

 

useState의 사용 이유

1. 상태 관리: useState를 통해 컴포넌트의 상태를 정의하고 그 상태를 변경할 수 있습니다. 이 상태는 UI의 렌더링을 결정하는 중요한 요소가 됩니다.
2. 상태가 변경될 때 자동으로 재렌더링: 상태가 변경되면 React가 해당 컴포넌트를 다시 렌더링해 UI가 자동으로 업데이트됩니다. 이를 통해 동적인 UI를 쉽게 구현할 수 있습니다.
3. 함수형 컴포넌트에서 상태를 쉽게 정의: 클래스형 컴포넌트에서는 this.state와 setState를 사용했지만, 함수형 컴포넌트에서는 useState Hook을 사용해 상태와 상태 변경 함수를 간단히 정의할 수 있습니다.

import React, { useState } from 'react';

function Counter() {
  // count는 현재 상태 값, setCount는 상태를 업데이트하는 함수
  const [count, setCount] = useState(0);

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

 

이 예시에서 useState(0)는 count라는 상태 값을 0으로 초기화하고, setCount를 통해 이 상태를 변경합니다. count가 변경될 때마다 컴포넌트가 다시 렌더링되어 UI가 업데이트됩니다.

 

 

useState의 state는 상태라는 의미로, React 컴포넌트 내에서 변할 수 있는 값을 말합니다. 이 값은 컴포넌트가 렌더링되면서 변경될 수 있고, 변경될 때마다 UI가 업데이트되도록 React가 관리해줍니다.

React에서의 state 의미

• state는 일반적으로 사용자 입력, 네트워크 요청 결과, 시간의 변화 등에 의해 변할 수 있는 값들입니다.
• 예를 들어, 사용자가 버튼을 클릭하면 숫자가 올라가는 카운터 앱에서 카운트 숫자가 state입니다. 이 숫자는 사용자가 버튼을 클릭할 때마다 바뀌고, 바뀐 값이 화면에 표시되죠.
• useState Hook을 사용하면, 함수형 컴포넌트에서도 이 state를 정의하고 관리할 수 있습니다.

state를 사용하는 이유

state를 사용하면 React가 상태가 바뀔 때마다 화면을 다시 렌더링해주기 때문에, 동적인 UI를 쉽게 만들 수 있습니다. 예를 들어, useState로 만든 카운터에서 state가 변경될 때마다 컴포넌트가 새로 렌더링되고, UI도 변경된 state에 따라 업데이트됩니다.

정리하자면, state는 React 컴포넌트가 관리하는, 변경될 수 있는 데이터를 의미하고, UI가 상태에 따라 변화할 수 있게 해주는 핵심 개념이에요!

 

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ