컴포넌트 간 데이터 전달

Props(Properies) = 매겨변수

• Props는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하기 위해 사용하는 매개변수

// 부모 컴포넌트
function Parent() {
  const name = "Alice";

  return <Child name={name} />;
}

// 자식 컴포넌트
function Child(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 출력: Hello, Alice!

State = 상태 = 값

• 컴포넌트 내부에서 관리되는 동적인 데이터
• 컴포넌트의 상태(State)가 변경되면 해당 컴포넌트와 하위 컴포넌트가 자동으로 다시 렌더링

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // 초기값 0 설정

  const increment = () => {
    setCount(count + 1); // State 업데이트
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increase</button>
    </div>
  );
}

// 버튼 클릭 시 Count 값이 증가하며 화면이 다시 렌더링됩니다.

---

함수 간 데이터 전달

Params(Parameters) = 매개변수 = 변수

• Parameters는 함수 정의 시 선언하는 변수
• 함수가 호출될 때 전달받는 인수를 참조하기 위한 이름

function greet(name) {
  console.log(`Hello, ${name}!`);
}
// name이 Parameter

Args(Arguments) = 전달인자 = 값

• Arguments는 함수 호출 시 전달하는 값
• 함수의 매개변수(parameter)에 대입되는 실제 값을 의미

function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet("Alice"); // "Alice"가 Argument