✔️ props: 속성값(properties)

☑️ Props 넘겨 받기

App.js

import "./App.css";
import Hello from "./component/Hello";

function App() {
  return (
    <div className="App">
      <Hello age={10} />
      <Hello age={20} />
      <Hello age={30} />
    </div>
  );
}

export default App;

Hello.js

import { useState } from "react";

export default function Hello(props) {
  const [name, setName] = useState("Mike");

  return (
    <div>
      <h1>state</h1>
      <h2>
        {name}({props.age}세)
      </h2>
      <button
        onClick={() => {
          setName(name === "Mike" ? "Jane" : "Mike");
        }}
      >
        Change
      </button>
    </div>
  );
}

또는

import { useState } from "react";

export default function Hello({age}) { //props는 age만 있음
  const [name, setName] = useState("Mike");
  const msg = msg > 19 ? "성인 입니다" : "미성년자 입니다";

  return (
    <div>
      <h1>state</h1>
      <h2>
        {name}({age}) : {msg}
      </h2>
      <button
        onClick={() => {
          setName(name === "Mike" ? "Jane" : "Mike");
        }}
      >
        Change
      </button>
    </div>
  );
}

결과창

age 값을 변경하고 싶다면 component내부에서 state를 다시 만들어야 함!
넘겨 받은 값이므로...

☑️ Props 따로 state에 저장하기

Hello.js

import { useState } from "react";

export default function Hello(props) {
  const [name, setName] = useState("Mike");
  const [age, setAge] = useState(props.age);

  return (
    <div>
      <h1>state</h1>
      <h2>
        {name}({age}세)
      </h2>
      <button
        onClick={() => {
          setName(name === "Mike" ? "Jane" : "Mike");
          setAge(age + 1); //버튼 누를 때마다 age가 1씩 증가 
        }}
      >
        Change
      </button>
    </div>
  );
}

화면에 어떤 data 갱신은 props, state로 처리!

☑️ 한 component의 state props로 넘기기

UserName.js

export default function UserName({ name }) {
  return <p>{name}</p>;
}

Hello.js

import { useState } from "react";
import UserName from "./UserName";

export default function Hello({age}) {
  const [name, setName] = useState("Mike");
 
  return (
    <div>
      <h1>state</h1>
      <h2>
        {name}({age}세)
      </h2>
    <UserName name={name}/> 
      <button
        onClick={() => {
          setName(name === "Mike" ? "Jane" : "Mike");
        }}
      >
        Change
      </button>
    </div>
  );
}

Hello 컴포넌트 내에서는 name은 state
UserName 컴포넌트 내에서는 props
이때 동시에 변경됨.