props

https://www.youtube.com/watch?v=DuJC2ATdGtw&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=8

props란?

props는 properties의 약자로 속성값을 의미한다.
state와 어떻게 다른지 살펴보자!

1) 우선 App.js에 age={}를 추가하고

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

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

export default App;

2) Hello.js의 function Hello()에 props를 넣어준 뒤
{name} 옆에 ({props.age})를 추가한다.

import { useState } from "react";

export default function Hello(props) {  //👈 props 추가
  console.log(props);
  const [name, setName] = useState("Mike");

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

👉 console에서 function Hello(props)를 확인하면 아래와 같은 내용을 확인할 수 있다.

👉 App.js에서 props를 받아와 Hello.js에 ({props.age})를 추가하면 이렇게 나온다.

그리고 이렇게 수정 가능하다.

import { useState } from "react";

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

넘겨받은 props값 변경? ❌

넘겨받은 props값은 컴포넌트 내부에서 변경할 수 없다.
넘겨받은 그대로 사용해야한다.

props값 자체를 변경하지는 못하지만 props값을 컴포넌트 내부에서 state로 만들어 관리할 수는 있다.

const [age, setAge] = useState(props.age); 이렇게.

만약 넘겨받은 props값을 props.age=100;과 같이 억지로 변경시키면 에러가 난다.

예시로, Change버튼을 누르면 나이가 +1 되도록 작성해보자.

import { useState } from "react";

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

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

위와 같이 작성하면 버튼을 눌렀을 때나이가 +1 된다.
다시한 번 작성한다.

📌 props값을 변경한게 아니라, 넘겨받은 props를 state로 만들어 관리하는 중이다.

props를 활용해보자

1) age를 App.js로부터 props로 받아와 비교하여 화면에 띄워주기

import { useState } from "react";

export default function Hello({ age }) {
  const [name, setName] = useState("Mike");
  const msg = age > 19 ? "성인입니다." : "미성년자 입니다.";
  //age가 19보다 많으면 "성인입니다." : age가 19보다 적으면 "미성년자 입니다."

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

📌 화면의 데이터를 갱신하기 위해서는 항상 state와 props를 사용해서 처리하는것이 좋다고 한다.

2) 컴포넌트가 가지고있는 state를 props로 넘겨주기

UserName.js라는 컴포넌트를 새로 만들고 아래의 코드를 작성한다.

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

// export default function UserName(props) {
//   return <p>Hello, {props.name}</p>;
// } 
// 혼자 작성해본 코드인데, 위와 같은 코드라고 이해했다.

그리고 Hello.js에 <UserName name={name} />을 넣어준다. 이렇게.
Auto import 되는건 덤

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

📌 {name}: Hello.js 컴포넌트에서는 state지만 UserName.js 컴포넌트 입장에서는 props다.

그리고 Change버튼을 누르면 {name}이 같이 바뀌는것도 확인할 수 있다.
Jane(10)세 : 미성년자 입니다.
Hello, Jane