[소플의 처음 만난 리액트] 13장 실습문제

Card.jsx

import React from "react";

function Card(props) {
  const { title, backgroundColor, children } = props;

  return (
    <div
      style={{
        margin: 8,
        padding: 8,
        borderRadius: 8,
        boxShadow: "0px 0px 4px grey",
        backgroundColor: backgroundColor || "white",
      }}
      >
        {title && <h1>{title}</h1>}
        {children}
      </div>
  );
}

export default Card;

ProfileCard.jsx

import React from "react";
import Card from "./Card";

// card 컴포넌트 만들기
function ProfileCard(props){
  return(
    <Card title="Inje Lee" backgroundColor="#4ea04e">
      <p>안녕하세요, 소플입니다.</p>
      <p>저는 리액트를 사용해서 개발하고 있습니다.</p>
    </Card>
  )
}

export default ProfileCard;

핵심 키워드

• 컴포넌트에서 다른 컴포넌트를 담는 것을 합성이라고 한다. 종종 어떤 컴포넌트의 특수한 경우인 컴포넌트를 만들어야 하는 경우가 있는데, 이런 경우를 특수화라고 한다.

• 일반적으로 특수화란 더 구체적인 컴포넌트가 일반적인 것을 렌더링하고 props를 통해 구체적인 내용을 설정하는 것을 말한다.

결론!