[ React ] 리액트의 기본적인 Hook "useState"

 

✅ State 란? 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.

내부에서 바뀌어야하는 목적은 UI(엘리먼트)로의 반영을 위해서다.

 

✅ State를 만들 때는 useState( )를 사용한다.

 

1. useState 란?

useState는 React Hook 중 하나로, 함수형 컴포넌트에서 State를 관리할 수 있게 해준다.

useState를 사용하면, State를 추가하고 업데이트 하는 것이 가능해진다.

import React, { useState } from 'react';

function Example() {
  const [name, setName] = useState('React');
  //...
}

 

위 코드에서 Example이라는 함수형 컴포넌트는 state를 가지고 있다.

이 state는 'React' 라는 초기 값을 가지고 있다.

 

2. useState 사용

useState는 하나의 argument를 받아온다. 이 argument는 state의 초기값을 설정하는 역할을 한다.

useState는 배열을 반환하며, 첫 번째 원소는 현재 state, 두 번째 원소는 state를 업데이트하는 함수이다.

function Example() {
  const [count, setCount] = useState(0);
  //...
}

 

이 코드는 count 라는 state를 0으로 초기화한 것이다.

 

3. State 변경

함수를 통해 state를 업데이트할 수 있다. setCount 함수를 통해 count state를 업데이트 할 수 있다.

setCount(count + 1);

 

간단한 예를 살펴보면, setCount 함수를 통해 count state의 값을 1 증가시켰다. 

 

4. State 적용

import React, { useState } from 'react';

function Example() {
  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라는 state와 이 state를 업데이트하는 setCount

함수를 반환한다. 버튼을 클릭할 때마다 setCount 함수를 호출하여 count state를 업데이트하고,

업데이트된 count state는 화면에 반영된다.