React 기초 트레이닝
React 기초 트레이닝
이 실습에서는 PatternFly의 Card 컴포넌트를 직접 만들어 보면서 React UI를 구성하는 방법을 익혀요. 컴포넌트와 서브컴포넌트가 어떻게 조합되는지 단계별로 함께 살펴볼게요.
본문
React 기초
PatternFly React는 컴포넌트·레이아웃·데모로 구성돼요. PatternFly React 라이브러리는 일관된 마크업·스타일·동작으로 인터페이스를 만드는 데 쓰는 React 컴포넌트 모음을 제공합니다.
PatternFly로 UI를 만드는 데 익숙해지기 위해 PatternFly 카드를 만들어 볼 거예요. 카드는 어떤 유형의 콘텐츠든 담을 수 있는 유연한 요소로, 대시보드·데이터 표시·페이지 내 콘텐츠 배치에 사용돼요.
1단계. 디자인을 고려하고 평가하기
Figure 1의 디자인을 살펴보고, 이 디자인을 구성하는 컴포넌트와 서브컴포넌트가 무엇인지 평가해 보세요.
Figure 1 — Figure 1은 PatternFly의 card 컴포넌트를 사용한 디자인이에요. 더 자세히 알아보려면 card의 React 구현 문서와 HTML 구조 문서를 읽어보세요.
PatternFly에서는 서브컴포넌트가 카드의 각 영역을 구성하므로, 그 구조가 다양한 디자인을 수용할 만큼 유연해요. 예를 들어 카드는 CardHeader, CardHeaderMain, CardActions, CardTitle 같은 서브컴포넌트를 1개 이상 포함할 수 있어요.
이 실습에서는 Figure 1의 디자인과 일치하도록 이미지·닫기 액션·헤더·본문·푸터가 있는 카드를 만들어봐요.
Figure 2 — Figure 1의 디자인은 Figure 2에서 보여주듯 카드의 여러 서브컴포넌트로 나눌 수 있어요. 이 카드를 만드는 데 쓰는 React 컴포넌트는 아래 카드 구조 코드 스니펫처럼 배치할 수 있어요. 제공된 CodeSandbox에서 이 코드를 보고 수정할 수도 있답니다.
Codesandbox - React fundamentals Card structure (카드 구조)
(카드 구조 코드 — CodeSandbox 참조)
2단계. CardHeader 만들기
CardHeader는 CardHeaderMain과 CardActions를 포함해요.
2.1단계
제품 로고타입을 화면에 배치하기 위해 CardHeaderMain 컴포넌트에 brand 컴포넌트를 추가하세요. 필요한 것은 소스 이미지 또는 SVG와 alt 텍스트뿐이에요. 여기서는 PatternFly 로고를 사용했어요.
(브랜드 컴포넌트 코드 — CodeSandbox 참조)
2.2단계
CardActions 컴포넌트에 닫기 버튼을 추가하세요. 버튼은 사용자가 앱 또는 웹사이트에서 취할 수 있는 동작을 전달하고 트리거해요. 버튼에는 primary, secondary, tertiary, danger, plain, link, control 같은 여러 변형이 있어요.
plain 변형으로 버튼을 추가하세요.
(버튼 코드 — CodeSandbox 참조)
2.3단계
버튼 안에 아이콘을 추가하세요. PatternFly React는 다양한 아이콘을 제공하며, 사용하기 쉽고 SVG 파일로 컴파일돼요. 이 아이콘들을 버튼과 다른 컴포넌트 안에서 사용하세요.
카드를 닫을 수 있도록 TimesIcon을 추가하세요.
(아이콘 코드 — CodeSandbox 참조)
3단계. CardTitle 만들기
3.1단계
<CardTitle> 안에 variant가 있는 content 컴포넌트를 추가하세요. content 컴포넌트는 표준 HTML 태그를 사용할 때 올바른 서식을 제공하도록 페이지에 배치된 정적 HTML 콘텐츠를 감쌀 수 있어요. content 컴포넌트에는 h1, p, a, small, blockquote, pre 같은 여러 변형이 있어요.
component="p"로 지정되는 'p' 변형을 사용하세요.
CardTitle 컴포넌트 안에 다음 코드를 추가하세요:
PatternFly
3.2단계
3.1단계에서 추가한 콘텐츠 위에 부제목(subhead)을 추가하세요. component prop이 없는 콘텐츠는 HTML 요소를 감싸고 여분의 간격과 스타일을 제공해요.
CardTitle 안의 content 컴포넌트 아래에 다음 코드를 추가하세요:
Provided by Red Hat
4단계. CardBody 컴포넌트에 콘텐츠 추가하기
CardBody 컴포넌트의 자식으로 어떤 채움 텍스트든 추가할 수 있어요.
5단계. CardFooter에 콘텐츠와 레이아웃 추가하기
5.1단계
CardFooter 컴포넌트에 split 레이아웃을 추가하세요.
PatternFly는 grid, bullseye, split 레이아웃을 포함한 여러 레이아웃 옵션을 제공해요.
카드 푸터에서 버튼 한 쌍을 분리하려면 split 레이아웃을 사용하세요. split 레이아웃은 항목을 가로로 배치하도록 설계됐어요. 레이아웃의 각 항목마다 <Split> 안에 <SplitItem> 컴포넌트를 추가하세요.
(split 레이아웃 코드 — CodeSandbox 참조)
5.2단계
첫 번째 SplitItem 컴포넌트에 버튼을 추가하세요. 버튼의 link 변형을 사용하고, 버튼이 블록 요소가 아니라 인라인 요소가 되도록 isInline 프로퍼티를 추가하세요.
Link to PatternFly
5.3단계
두 번째 SplitItem 컴포넌트에 버튼을 추가하세요. 5.2단계와 같은 변형과 프로퍼티를 사용하세요.
Link to home
5.4단계
버튼 사이에 더 많은 간격을 주기 위해 Split 컴포넌트에 hasGutter 프로퍼티를 추가하세요. hasGutter 프로퍼티가 설정된 Split 컴포넌트는 이렇게 보여야 해요.
(hasGutter 적용 코드 — CodeSandbox 참조)
결과 비교하기
완전히 구성된 카드는 CodeSandbox 솔루션에서 보고 수정할 수 있어요. 여러분의 작업을 솔루션과 비교해 보세요.
Codesandbox solution - React fundamentals