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

1. Props(프로퍼티)란?

- 상위 컴포넌트가 하위 컴포넌트에게 값을 전달할 때 사용

- 프로퍼티는 수정할 수 없다는 특징이 있음(읽기 전용 데이터)

- props에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용

 

 

2. Props(프로퍼티) 사용하기

 

1. App.js에서 Test.js에 값 전달

2. App.js에서 출력할 글 작성

3. index.js에서 출력

 

App.js

export default function App() {
  return (
    <div>
      <Test 이름="soobin" mbti="INTP" 나이={18} />
    </div>
  );
}

 

Test.js

export default function Test(props) {
  return (
    <div>
      <h1>Hello, This is {props.이름}</h1>
      <p>My MBTI is {props.mbti}</p>
      <p>My age is {props.나이}</p>
    </div>
  );
}

 

index.js

import { createRoot } from "react-dom/client";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <App />
);

Hello, This is soobin

My MBTI is INTP

My age is 18

 

3. 조건부 렌더링

- 특정 조건에 따라 각각 다른 값을 출력하는 것을 의미함

 

조건부 렌더링을 사용하여 아까의 코드에 나이에 따라 성인인지 아닌지를 출력하는 코드를 추가해 보겠다.

export default function Test(props) {
  return (
    <div>
      <h1>Hello, This is {props.이름}</h1>
      <p>My MBTI is {props.성격}</p>
      <p>My age is {props.나이}</p>
      {props.age >= 20 && <span>성인</span>}
    </div>
  );
}

{props.age >= 20 && <span> 성인 </span>} 를 추가하여 입력된 나이가 20이 넘었다면 성인을 출력하고 넘지 않는다면 출력하지 않는다. 

입력	이름="soobin" mbti="INTP" 나이={18}	이름="junghwa" mbti="ISTP" 나이={48}
출력	Hello, This is soobin My MBTI is INTP My age is 18	Hello, This is junghwa My MBTI is ISTP My age is 48 성인