[React] 상태(state), props, 이벤트 처리

1. State - 컴포넌트 내부에서 변하는 값

컴포넌트 안에서 바뀌는 데이터 

 

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // count가 상태

  return (
    <div>
      <p>현재 숫자: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

• useState(0) → 초기값 0으로 상태 생성
• setCount() → 상태를 변경하는 함수
• 상태가 바뀌면, 화면도 자동으로 다시 렌더링

 

2. Props

부모 컴포넌트가 자식 컴포넌트에게 값을 전달

 

function Welcome({ name }) {
  return <h1>{name}님, 환영합니다!</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="지수" />
      <Welcome name="성찬" />
    </div>
  );
}

 

• name="지수"는 Welcome 컴포넌트에 전달된 props
• props는 읽기 전용이며, 자식 컴포넌트는 내용을 바꿀 수 없음

 

3. 이벤트 처리

사용자와 상호처리

 

function Button() {
  const handleClick = () => {
    alert('버튼이 클릭되었습니다!');
  };

  return <button onClick={handleClick}>클릭</button>;
}

 

• HTML 이벤트와 다르게 camelCase (onClick -< onClick)
• 함수도 문자열이 아니라 함수 객체 전다

개념	설명
State	컴포넌트 안에서 바뀌는 값
Props	부모가 자식에게 주는 읽기 전용 값
이벤트	사용자 동작에 반응하는 함수 처리 방식