<React - State % Props>

*Props

-컴포넌트의 속성
-외부로부터 전달받은 값
-부모 컴포넌트(상위 컴포넌트)로부터 전달받은 값
-객체 형태
-읽기 전용(read-only)

-Props 사용하는 방법
1. 하위 컴포넌트에 전달하고자 하는 값(data)과 속성을 정의한다.
2. props를 이용하여 정의된 값과 속성을 전달한다.
3. 전달받은 props를 렌더링한다.

function Parent() {
  return (
    <div className="parent">
      <h1>I'm the parent</h1>
      <Child text={"I'm the eldest child"} />
    </div>
  );
}

function Child(props) {
  return (
    <div className="child">
      <p>{props.text}</p>
    </div>
  );
}

*State

-컴포넌트 내에서 변할 수 있는 값
-useState 사용하기

import { useState } from "react";
const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값);

-state 갱신하기
state 갱신 함수 호출하기

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span>
    </div>
  );
}