useState훅, 이 글만 보시면 충분합니다!!!

리액트를 사용하면서 가장 처음 마주치게 되는 개념 중 하나가 useState 훅일 거예요.

여러분, useState 훅을 사용하면 상태 변수를 선언하고 관리할 수 있다는 거 알고 계셨나요? 오늘은 이 강력한 도구에 대해 쉽게 풀어볼게요!

---

🚀 useState 훅, 진짜 뭐하는 녀석이야?

리액트에서 useState는 상태 변수를 선언하고 관리하는 데 사용하는 훅이에요. 상태 변수는 컴포넌트의 상태를 나타내는 변수로, 사용자 인터페이스(UI)가 동적으로 변해야 할 때 사용해요.

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

여기서 state는 현재 상태를 나타내고, setState는 상태를 업데이트하는 함수예요. initialState는 초기 상태 값을 설정하는 데 사용되죠.

 

📈 기본 사용법, 어렵지 않아요!

가장 기본적인 예제로, 클릭할 때마다 숫자가 증가하는 카운터를 만들어볼게요.

import React, { useState } from 'react';

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

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

export default Counter;

여기서 count는 현재 클릭 횟수를 나타내는 상태 변수이고, setCount는 클릭할 때마다 count를 업데이트하는 함수예요.

 

🧐 꼭 count, setCount이어야 할까?

아니에요! 사실 어떤 이름이든 상관없어요. 하지만 상태변화를 해주는 변수의 이름은 앞에 set을 붙이고 선택한 변수의 앞자를 대문자로 변환하여 붙여 사용하는 것이 일반적인 '관례'랍니다!

배열의 구조 분해 할당을 떠올려보면 이해하기 쉬울 거예요.

const arr = [10, 20, 30];
const [a, b, c] = arr; // a: 10, b: 20, c: 30
const [x, y, z] = arr; // x: 10, y: 20, z: 30

마찬가지로, useState도 배열의 구조 분해 할당을 사용하는 거랍니다. 이름은 자유롭게 지을 수 있어요!

 

✨ 다양한 폼 요소와 useState

useState를 사용해서 폼 입력 요소의 값을 제어할 수 있어요. 몇 가지 예시를 볼까요?

텍스트 입력

import { useState } from "react";

const App = () => {
  const [input, setInput] = useState("");
  return (
    <div>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
    </div>
  );
};

export default App;

이렇게 useState 훅을 사용하여 다양한 폼 요소를 제어할 수 있어요. 리액트에서 상태를 관리하는 기본 방법인 useState 훅을 잘 활용하면 복잡한 UI도 쉽게 다룰 수 있습니다. 이제 여러분도 리액트의 마법을 경험해보세요!