[ vite+React 기초학습 5]이벤트 처리와 상태 관리의 시작 (useState)

이벤트 처리란 무엇인가

이벤트 처리란 버튼 클릭, 입력값 변경 등 사용자 상호작용에 대한 응답 코드를 작성하는 것을 의미합니다. React에서는 HTML 이벤트 속성과 유사하지만, camelCase 형식으로 작성하고 함수로 처리합니다.

상태란 무엇인가

상태(State)는 컴포넌트의 데이터 저장소로, 사용자와의 상호작용에 따라 변경될 수 있는 값을 의미합니다. useState 훅을 통해 상태를 선언하고 사용할 수 있습니다.

기본 개념

• 이벤트 리스너는 camelCase 형식으로 작성
• 상태 변경 시 React가 자동으로 리렌더링
• useState는 [값, 설정함수] 쌍을 반환

주요 사용 위치/상황

• 버튼 클릭 시 카운터 증가
• 입력 필드의 값 실시간 반영
• UI 상태 변경 (ex. 모달 열기/닫기)

구체적 코드 예시

import { useState } from 'react';

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

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

  return (
    <div>
      <p>클릭 수: {count}</p>
      <button onClick={handleClick}>클릭</button>
    </div>
  );
}

핵심 요점 정리

• 이벤트는 onClick처럼 camelCase로 작성합니다
• useState를 사용해 상태를 선언하고 변경합니다
• 상태가 변경되면 컴포넌트가 다시 렌더링됩니다
• 함수형 컴포넌트에서는 상태 훅을 꼭 상단에서 선언합니다

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.