Reactjs

구성 요소를 사용하여 레이아웃 다시 만들기 - challenge 8

조회 309 (작성일 2019.08.02 14:43)
- 음성
- 목록

구성 요소는 React Applications의 기본 요소이며 각각은 JavaScript 함수입니다. 이러한 구성 요소는 상위 및 하위 구성 요소로 구성됩니다.

데이터는 부모에서 자식으로 소위 불리는 것을 통해 전달됩니다. 소품은 단순히 이러한 기능에 대한 논증입니다.

React의 데이터는 소품을 통해 부모 구성 요소에서 하위 구성 요소로 전송 될 수 있습니다.

이 도전 과제에 대해 정의 된 하나의 React 구성 요소에서 여러 카드를 만들어 간단한 레이아웃을 다시 만듭니다.

https://scotch.io/courses/10-react-challenges-beginner/recreate-layout-with-components

과제 : 실제 구성 요소 만들기

CodePen Final: https://codesandbox.io/s/x92x28yy8w
CodePen Starter: https://codesandbox.io/s/ym9r49w3n9

이 챌린지에는 하위 구성 요소 역할을 하는 빈 함수가 제공됩니다. 이 구성 요소에는 icon, label 및 number의 소품이 제공됩니다.

이 과제의 주요 과제는 다음과 같습니다.

JSX에서 하위 구성 요소를 정의하십시오.
자식 구성 요소에 icon, label 및 number의 소품을 정의하십시오.
제공된 상위 구성 요소에서 하위 구성 요소를 여러 번 사용하고 다양한 데이터를 소품으로 전달하십시오.

시동 코드

시작하려면 Codesandbox를 시작하십시오. https://codesandbox.io/s/ym9r49w3n9

StatCard 함수가 제공되며 이를 App 구성 요소의 하위 구성 요소로 사용합니다.

시동기 CodeSandbox에는 스타일링이 포함되어 있어 자유롭게 사용할 수 있습니다.

마지막 페이지는 다음과 같습니다.

hcducds0xxykykrtuaoo.mp4

보너스 포인트

이 도전 과제의 보너스로, 소품을 사용하여 부모로부터 자식 구성 요소로 함수를 전달하십시오.

시작하려면 이 CodeSandbox를 포크하십시오. https://codesandbox.io/s/ym9r49w3n9

솔루션 : 구성 요소를 사용하여 레이아웃 다시 만들기

구성 요소는 React 어플리케이션의 필수적인 부분입니다.

이러한 문제를 해결하기 위해 하위 구성 요소를 정의하고 하위 구성 요소에서 소품을 통해 수신 할 데이터를 정의한 다음이 하위 구성 요소를 상위 구성 요소에서 여러 번 활용해야 합니다.

구성 요소는 React에서 데이터와 구조의 재사용을 허용합니다.

이 과제는 다음 세 단계로 해결됩니다.

하위 구성 요소를 정의하고 매개 변수로 소품을 제공하십시오.
상위 구성 요소에서 하위 구성 요소를 사용하고 소품을 통해 데이터를 제공하십시오.

하위 구성 요소 정의

Starter CodeSandbox에는 아무것도 반환하지 않은 빈 StatCard 구성 요소가 제공되었습니다. 다음을 사용하여 구성 요소를 정의하십시오.

import // ... import dependencies

function StatCard(props) {
  return (
    <div className="stat-card">
      <div className="stat-line">
        <span>{props.icon}</span>
        <strong>{props.label}</strong>
      </div>
      <p>{props.number.toLocaleString()}</p>
    </div>
  );
}

function App() {
  return (
    <div className="App">
          // define parent component
    </div>
  );
}

여기에서는 아이콘, 레이블 및 숫자가 있는 단순한 카드 인 하위 구성 요소를 정의했습니다. 이 데이터의 가치는 제공된 소품에서 얻을 것입니다.

StatCard 구성 요소를 정의하는 더 좋고 더 깨끗한 방법은 매개 변수에서 사용하기 전에 매개 변수에서 객체를 제거하는 것입니다. StatCard 구성 요소를 다음과 같이 재정의 하십시오.

function StatCard({ icon, label, number }) {
  return (
    <div className="stat-card">
      <div className="stat-line">
        <span>{icon}</span>
        <strong>{label}</strong>
      </div>
      <p>{number.toLocaleString()}</p>
    </div>
  );
}

하위 구성 요소 활용

하위 구성 요소를 정의하고 수신 할 데이터를 지정하고 구성 요소에서 이 데이터를 사용하는 동안 부모에서 이 구성 요소를 여러 번 사용할 것입니다.

구성 요소의 사용을 보다 잘 설명하기 위해 각 하위 구성 요소마다 다른 데이터가 사용됩니다.

import // ... import statement

function StatCard({ icon, label, number }) {
  return (
    <div className="stat-card">
      <div className="stat-line">
        <span>{icon}</span>
        <strong>{label}</strong>
      </div>
      <p>{number.toLocaleString()}</p>
    </div>
  );
}

function App() {
  return (
    <div className="App">
      <StatCard icon="" label="Points" number={3000} />
      <StatCard icon="" label="Lightnings" number={6540} />
      <StatCard icon="" label="Shakas" number={337010} />
      <StatCard icon="" label="Diamonds" number={98661} />
    </div>
  );
}

하위 구성 요소는 각 구성 요소에 대해 다양한 데이터로 4 번 부모에서 사용됩니다. 제공된 각 데이터는 이전에 정의 된 하위 구성 요소로 전달됩니다.

우리는 이것으로 무엇을 가지고 있을까요?

tg2jde6nbgnzdipkt6fo.mp4