(실습) Card 컴포넌트 만들기
이번 실습에서는 위에서 배운 두 가지 합성 방법을 사용해서 Card 컴포넌트를 만들어 보겠습니다. 먼저 앞에서 VS Code로 create-react-app을 이용해서 만든 프로젝트를 엽니다. 그러고나서 아래와 같이 chapter_13이라는 이름으로 폴더를 하나 생성합니다. 그 다음 만든 폴더에 Card.jsx라는 이름의 파일을 새로 만들고 아래 코드처럼 Card라는 이름의 함수 컴포넌트를 만듭니다.
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;Card 컴포넌트는 하위 컴포넌틀르 감싸서 카드 형태로 보여 주는 컴포넌트입니다. 앞에서 배운 Containment와 Specialization, 이 두 가지 합성 방법을 모두 사용하여 구현했습니다. 여기에서 children을 사용한 부분이 Containment이고 title과 background를 사용한 부분이 Specialization이라고 할 수 있습니다.
Card 컴포넌트는 범용적으로 재사용이 가능한 컴포넌트인데 이것을 사용하여 Profile Card 컴포넌트를 만들어 보겠습니다. Card 컴포넌트와 동일한 폴더에 ProfileCard.jsx라는 이름의 파일을 새로 만들고, 아래 코드처럼 ProfileCard라는 이름의 함수 컴포넌트를 만듭니다.
import Card from "./Card";
function ProfileCard(props) {
return (
<Card title="seon" backgroundColor="#4ea04e">
<p>안녕하세요, 소플입니다.</p>
<p>저는 리액트를 사용해서 개발하고 있습니다.</p>
</Card>
);
}
export default ProfileCard;ProfileCard 컴포넌트는 Card 컴포넌트를 사용하여 title에 이름을 넣고 backgroundColor를 녹색으로 설정하였습니다. children으로 간단한 소개 글을 넣어봤습니다.이렇게 하면 Card 컴포넌트가 사용자의 프로필을 나타내는 ProfileCard 컴포넌트가 됩니다.
만든 ProfileCard 컴포넌트를 실제로 화면에 렌더링하기 위해 index.js 파일을 수정해야 합니다. 다음 코드와 그림에 표시된 부분을 참고하여 새로 만든 ProfileCard 컴포넌트를 임포트해서 ReactDoM.createRoot() 함수로 만든 root의 render () 함수에 넣어주는 코드로 변경해 보세요.
코드 작성이 끝났으면 리액트 애플리케이션을 실행해 보도록 하겠습니다. VS Code의 상단 메뉴에서 Terminal>New Terminal을 눌러 새로운 터미널을 하나 실행시킵니다. 이후 아래 그림처럼 npm start 명령어를 실행합니다.
잠시 뒤에 웹브라우저의 새 창이 열리면서 http://localhost:3000에 접속되는 것을 볼 수 있습니다. 화면에는 카드 형태의 요소가 하나 나오는데 그 카드에는 이름과 소개글이 쓰여 있는 것을 볼 수 있습니다. 간단한 형태의 프로필 카드가 되는 것이죠.
정리
- 합성이란?
여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것
다양하고 복잡한 컴포넌트를 효율적으로 개발할 수 있음- 합성 기법
1) Containment
- 하위 컴포넌트를 포함하는 형태의 합성 방법
- 리액트 컴포넌트의 props에 기본적으로 들어 있는 children 속성을 사용
- 여러 개의 children 집합이 필요한 경우 별도로 props를 각각 정의해서 사용
2) Specialization
- 범용적인 개념을 구별되게 구체화하는 것
- 범용적으로 쓸 수 있는 컴포넌트를 만들어 놓고 이를 구체화시켜서 컴포넌트를 사용하는 합성 방법- Containment와 Specialization을 함께 사용하기
- props.children을 통해 하위 컴포넌트를 포함시키기(Containment)
- 별도의 props를 선언하여 구체화시키기(Specialization)
- 상속이란?
- 다른 컴포넌트로부터 상속받아서 새로운 컴포넌트를 만드는 것
- 상속을 사용하여 컴포넌트를 만드는 것을 추천할 만한 사용 사례를 찾지 못함
- 리액트에서는 상속이라는 방법을 사용하는 것보다는 합성을 사용하는 것이 더 좋음
