분류 Reactjs

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

컨텐츠 정보

  • 조회 309 (작성일 )

본문

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


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


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


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


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


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


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


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

  • 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 



여기에서 완성 된 CodeSandbox를 찾으십시오 : https://codesandbox.io/s/x92x28yy8w


결론


이 과제에서 우리는 React에 대한 컴포넌트의 중요성을 확인하고 하위 컴포넌트를 사용하여 레이아웃을 여러 번 구축했습니다.