props

props란?

어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용한다.

먼저 vite로 React 프로젝트를 생성했다.

yarn create vite week1

cd week1
yarn
yarn dev 또는 yarn vite

---

props 기본 사용법

간단하게 Card를 만들어보았다.

🔻App.jsx

import { React } from "react";
import BaseCard from "./BaseCard";
import Wrapper from "./Wrapper";

function App() {
  const style = {
    display: "flex",
    justifyContent: "center",
    marginTop: "50px",
  };
  return (
    <div style={style}>
      <BaseCard name="이서영" age="23" study="React" color="red" />
    </div>
  );
}

export default App;

🔻BaseCard.jsx

import React from "react";

function BaseCard(props) {
  const style = {
    display: "flex",
    flexDirection: "column",
    gap: "5px",
    width: "fit-content",
    padding: "30px",
      borderRadius: "15px",
    backgroundColor:'#fff',
    boxShadow: "2px 2px 10px gray",
  };
  return (
    <div style={style}>
      <h1>Hello, {props.name}🥳</h1>
      <p>Age: {props.age}</p>
      <strong>
        I'm currently Studying...{" "}
        <span style={{ color: props.color }}>{props.study}</span>
      </strong>
    </div>
  );
}

export default BaseCard;

• BaseCard.jsx에서 props로 name, age, study, color를 쓰겠다고 정해줬다면, 해당 컴포넌트를 사용하고 있는 부모 컴포넌트에서는 props를 정의해야 한다.

---

defaultProps로 기본값 설정하기

컴포넌트에 props 를 지정하지 않았을 때 기본적으로 사용할 값을 설정하고 싶다면 컴포넌트에 defaultProps 라는 값을 설정하면 된다.

import React from "react";

function BaseCard(props) {
  const style = {
    /*...중략...*/
  };
  return (
    <div style={style}>
      <h1>Hello, {props.name}🥳</h1>
      <p>Age: {props.age}</p>
      <strong>
        I'm currently Studying...{" "}
        <span style={{ color: props.color }}>{props.study}</span>
      </strong>
    </div>
  );
}

BaseCard.defaultProps = {
  name: "홍길동",
};

export default BaseCard;

• defaultProps로 기본 name 초기화를 "홍길동"으로 정해주었기 때문에 부모 컴포넌트에서 props를 넘겨주지 않는다면 name은 "홍길동"으로 보여진다.

<BaseCard age="23" study="React" color="red" />

---

props.children으로 태그 사이 값 조회하기

🔻App.jsx

import { React } from "react";
import BaseCard from "./BaseCard";
import Wrapper from "./Wrapper";

function App() {
  const style = {
    display: "flex",
    justifyContent: "center",
    marginTop: "50px",
  };
  return (
    <Wrapper style={style}>
      <BaseCard name="이서영" age="23" study="React" color="red" />
    </Wrapper>
  );
}

export default App;

• 위와 같이 Wrapper 태그를 이용해서 props 주고받고 있는 컴포넌트를 감싼다면 children을 통해 props를 조회해야 한다.

🔻Wrapper.jsx

import React from 'react'

function Wrapper({ children}) {
    const style = {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        margin: '30px auto',
        boxShadow: '2px 2px 10px gray',
        width: "500px",
        height: "500px",
        borderRadius:'15px',
        backgroundColor: 'azure',
    }
  return (
      <div style={style}>
          { children}
    </div>
  )
}

export default Wrapper

• 위와 같이 Wrapper 메소드의 인자로 props.children을 렌더링해주어야 BaseCard.jsx의 내부 내용이 보여지게 된다.

---

+) props는 writable이 false라서 값을 변경할 수 없다.