React 훅 사용법 : useState

함수 컴포넌트에서는 기본적으로 state를 제공하지 않기 때문에 클래스 컴포넌트의 state 기능을 함수 컴포넌트에서도 사용하려면 useState()훅을 사용해야 한다.

 

state에 대한 설명은 아래 포스팅 참고

https://moo-you.tistory.com/1065

State: React에서 상태 관리의 기본 개념

 

 

useState 사용방법

import React, { useState } from 'react';

컴포넌트 최상위 레벨에서 사용할 훅( useState )을 import 한다.

 

useState 선언

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

 

• state(변수명) : 현재 상태 값을 담고 있는 변수 이 값은 컴포넌트가 처음 렌더링될 때 initialValue로 초기화된다.
• setState(set함수명): 상태를 변경하는 함수이다. 이 함수를 호출하면 React가 컴포넌트를 다시 렌더링한다.
• initialValue(초깃값): 상태의 초기값을 설정한다. 문자열, 숫자, 객체, 배열 등 모든 JavaScript값이 가능하다.

 

useState 사용예시

import React, { useState } from 'react';

function Counter() {
  // useState 훅을 사용하여 'count'라는 상태 변수를 선언하고, 초기값을 0으로 설정
  const [count, setCount] = useState(0);

  // 버튼 클릭 시 count 값을 증가시키는 함수
  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h1>Count: {count}</h1> /* count 값을 화면에 표시 */
      <button onClick={increment}>Increase Count</button> /* 버튼 클릭 시 increment 함수 실행 */
    </div>
  );
}

export default Counter;

 

 

예시 코드 설명

import React, { useState } from 'react';

제일 상단 useState를 사용하기 위해서 import 한다.

 

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

count는 지금 현재 상태를 나타내는 변수이고, setCount는 이 상태를 업데이트 할 수 있는 함수이다.

0으로 초기값 설정

 

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

increment함수는 setCount를 호출해서 count+1을 전달해서 상태를 갱신한다.

 

<button onClick={increment}>Increase Count</button>

버튼 클릭 시 onClick 이벤트가 increment함수를 호출해서 상태를 업데이트 한다.