[React] props를 통해 컴포넌트에 값 전달하기

props는 properties의 줄임말이다. 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props를 사용한다.

 

예를 들어, App 컴포넌트에서 Hello 컴포넌트를 사용할 때 age라는 값을 전달해주려면 다음과 같이 코드를 작성하면 된다.

// App.js

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

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>
      <h2>
        {name}({props.age}세)
      </h2>
      <button
        onClick={() => {
          setName(name === "Mike" ? "Jane" : "Mike");
        }}
      >
        Change
      </button>
    </div>
  );
}

 

---

 

props로 넘겨받은 값은 컴포넌트 안에서 변경할 수 없다. 넘겨받은 값을 변경하려고 하면 에러가 발생한다.

 

만약 값을 변경하고 싶으면 컴포넌트 내부에서 state를 다시 만들어야 한다.

// Hello.js

import { useState } from "react";

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

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

---

 

구조분해할당 문법으로 다음과 같이 props를 전달받을 수도 있다.

import { useState } from "react";

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

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

---

 

다음은 컴포넌트가 가지고 있는 state를 props로 넘기는 예제다.

// UserName.js

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

// Hello.js

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

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

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

 

Hello 컴포넌트의 name이 바뀌면 UserName 컴포넌트의 name도 바뀌는 것을 확인할 수 있다.