1. Props란?

• props는 properties의 줄임말로, 컴포넌트끼리 값을 전달하기 위한 수단이다.
• props는 수정할 수 없다. (Read-Only)

---

2. Props 사용방법

프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다.

2-1. 1개의 props 넘기기

// App.js

import React, { Component } from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';

function App() {
  return (
    <div>
      <Header />
      <Main name="A"/>
      <Footer />
    </div>
  );
}

export default App;

// Main.js

import React from 'react';

function Main(props) {
    return (
        <div>
            <main>
                <h1>안녕하세요. {props.name} 입니다.</h1>
            </main>
        </div>
    );
}

export default Main;

출력결과
안녕하세요. 백서진 입니다.

2-2. 2개의 props 넘기기

// App.js

import React, { Component } from 'react';
import Header from './component/Header';
import Footer from './component/Footer';
import Main from './component/Main';

function App() {
  return (
    <div>
      <Header />
      <Main name="백서진" color="red"/> // 이름 이외의 글씨 색상 props 넘기기
      <Footer />
    </div>
  );
}

export default App;

// Main.js

import React from 'react';

function Main(props) {
    return (
        <div>
            <main>
                <h1 style={{color: props.color}}>안녕하세요. {props.name} 입니다.</h1>
            </main>
        </div>
    );
}

export default Main;

출력 결과
안녕하세요. 백서진 입니다.

javascript의 비구조화 문법을 사용하여 props를 다음과 같이 생략 가능하기도 하다.

import React from 'react';

function Main({name, color}) { // props 대신 비구조화 할당
    return (
        <div>
            <main>
                <h1 style={{color}}>안녕하세요. {name} 입니다.</h1>
            </main>
        </div>
    );
}

export default Main;

---

3. 조건부 렌더링

조건부 렌더링이란?

• 특정 조건에 따라 다른 결과물을 렌더링하는 것을 의미한다.
• 두 개의 컴포넌트가 있다면 두 개의 컴포넌트를 if 문을 이용하여 적절한 컴포넌트를 설계하여 UI를 구성하는 것이 조건부 렌더링인 것이다!!

3-1. 사용방법

논리 연산자인 &&를 사용하여 간편하게 코드를 작성할 수 있다. 이는 자바스크립트내의 중괄호를 이용하여 표현할 수 있으며 다음 예시처럼 사용할 수 있다.

3-2. 사용 예시

// App.js

// Joke라는 컴포넌트 만들기
// setup과 punchline이라는 props를 받습니다
// setup으로 받은 문자열은 h3로 렌더링
// punchline은 p로 렌더링
// 마지막 줄은 hr 태그 넣어서 밑줄 긋기

// 조건부 렌더링
// 만약 setup이 없으면 h3을 생략하도록 만들어보세요

import "./styles.css";
import Joke from "./components/Joke"; // ./ 찍어주기

export default function App(props) {
  return (
    <div className="App">
      <Joke setup="바나나가 웃으면" punchline="바나나킥" />
      <Joke setup="교통사고를 음식으로 표현하면" punchline="붕어빵" />
      <Joke punchline="안녕" upvotes={5}/>
    </div>
  );
}

// Joke.js

export default function Joke(props) {
  return (
    <div>
      {/* 조건부 렌더링 */}
      {/* 만약 setup이 없으면 h3을 생략하도록 만들어보세요 */}
      {props.setup && <h3>Setup : {props.setup} </h3>}
      <p>Punchline : {props.punchline} </p>
      <hr />
    </div>
  );
}

위 예시 코드를 보면 setup의 값이 안들어왔을 때 < h3 >을 생략하기 위해 && 연산자를 사용한 모습을 볼 수 있다. setup에 값이 있으면 < h3 >은 실행되고, setup에 값이 없으면 < h3 > 은 실행되지 않는다.