React 의 Props 와 useState

1. Props (컴포넌트에 값 전달하기)
2. useState (컴포넌트 내부에서 상태 관리하기)

---

1️⃣ Props 란?

• 컴포넌트에 값을 전달하는 방법. 부모 → 자식 컴포넌트로 데이터를 보낼 때 사용

// Hello.tsx
type HelloProps = {
    name: string;
};

function Hello({ name }: HelloProps) {
    return <p>안녕하세요, {name}님!</p>;
}

export default Hello;

// App.tsx
import Hello from "./props/Hello";

function App() {
  return (
    <div>
      <Hello name="유노" />
    </div>
  )
}

export default App;

• HelloProps 라는 타입을 만들어서 props 의 타입을 명시
• Hello 컴포넌트는 name을 받아서 출력
• App 컴포넌트가 Hello 를 사용할 때 name을 전달해주는 구조
  실무에서도 거의 모든 컴포넌트가 props를 받아서 동작함

---

2️⃣ useState 란?

• useState 는 컴포넌트 안에서 상태(state) 를 만들어서 관리할 수 있게 해주는 React 의 Hook

// Counter.tsx
import { useState } from "react";

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

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

    return (
        <div>
            <p>현재 카운트: {count}</p>
            <button onClick={handleClick}>+1 증가</button>
        </div>
    );
}

export default Counter;

// App.tsx
import Counter from "./props/Counter";

function App() {
  return (
    <div>
      <h1>간단한 카운터 예제</h1>
      <Counter />
    </div>
  )
}

export default App;

• useState(0) → 초기 상태는 0이고, 숫자 타입이라고 명시
• setCount 를 호출하면 상태가 바뀌고, 화면도 자동으로 다시 렌더링 됨
• onClick 으로 버튼 누르면 handleClick 실행 → 상태 변경