반응의 매핑

최근에 배운 것은 React에서 매핑하는 방법입니다. 아래에서는 React 앱에서 매핑을 설정하는 방법에 대한 한 가지 예를 살펴보겠습니다.

1. 부모 구성 요소 설정

가져온 데이터를 포함해야 하는 구성 요소를 식별합니다. 이것은 부모 구성 요소일 가능성이 높습니다. 어떤 자식 구성 요소가 데이터에 액세스해야 하는지 생각해야 합니다! 해당 구성 요소에 데이터를 소품으로 전달하게 됩니다.

이 예제에서는 리소스(데이터) 목록을 가져오고, 데이터를 매핑하고, 각 리소스에 대한 카드를 만든 다음 데이터를 별도의 구성 요소에 소품으로 전달하여 카드를 포맷합니다. 부모 구성 요소는 ResourceList 이고 자식 구성 요소는 ResourceCard 입니다.

import React, {useState, useEffect} from "react";
import ResourceCard from "./ResourceCard";

function ResourceList() {
  const [resources, setResources] = useState([])

  useEffect(() => {
    fetch('http://localhost:3000/resources')
    .then((r) => r.json())
    .then((resources) => setResources(resources))
    }, [])

  const resourceList = resources.map((resource) => {
    return (
      <ResourceCard
      key={resource.id}
      name={resource.name}
      url={resource.url}
      summary={resource.summary}
      image={resource.image}
        />
    ) })

  return (
    <div>
      <h2>Resources</h2>
      <ul>
        {resourceList}
      </ul>
    </div>
  )
}

export default ResourceList;

해당 코드를 분석해 보겠습니다.

먼저 "react"에서 React, useState 및 useEffect를 가져옵니다. ResourceCard 반품에 포함해야 하므로 ResourceList도 가져옵니다.

그런 다음 ResourceList 함수를 설정합니다. 그 안에서 우리는 데이터에 대한 상태를 생성하는 것으로 시작합니다. 빈 배열을 사용하여 가져온 데이터가 어딘가에 갈 수 있도록 합니다!

다음은 useEffect 함수입니다. /resources에서 데이터를 가져와 json으로 변환한 다음 리소스를 설정합니다. 페이지가 로드될 때 이 가져오기가 한 번만 발생하도록 함수 끝에 빈 배열을 포함합니다.

이제 데이터를 매핑할 수 있습니다! 새 변수( resourceList )에 넣고 매핑 방법과 동일하게 설정합니다. 이 resourceList는 우리의 ResourceList와 다릅니다. 이름은 거의 같지만 React의 구성요소는 대문자로 시작하고 변수는 카멜케이스를 사용합니다(최소한 모범 사례로!). 이 방법으로 우리가 말하는 것은 ResourceCard 목록의 모든 resource에 대해 resources를 생성한다는 것입니다.

또한 ResourceCard로 전달해야 하는 매개변수(키, 이름, URL, 요약, 이미지)를 포함하도록 했습니다. 스프레드 연산자를 사용하여 이 작업을 수행할 수도 있지만, 개별적으로 나열된 모든 매개변수를 내 두뇌가 보기가 더 쉽기 때문에 모두 작성하는 것을 좋아합니다.

매핑 함수 아래에서 ResourceList 에 대한 반환값을 설정했습니다. 모든 것을 하나의 <div> 로 래핑한 다음 그 <div> 내에서 <h2> 및 <ul> 요소를 설정합니다. <h2>는 제목을 포함하고 <ul>는 {resourceList}(위에서 매핑한 비트)를 포함합니다.

마지막으로 App.js가 가져올 수 있도록 export default ResourceList를 작성합니다!

2. 하위 구성 요소 설정

이 경우 자식 구성 요소는 매우 간단합니다! ResourceCard 에 대한 JSX를 설정하기만 하면 됩니다.

import React from 'react';

function ResourceCard({summary, name, url, image}) {
    return (
        <div>
            <img src={image}/>
            <h2>{name}</h2>
            <p>{summary}</p>
            <a href={url} target="_blank">Read more!</a>
        </div>
    )
}

export default ResourceCard;

이 구성 요소의 코드도 분해합니다.

물론 'react'에서 React를 가져오는 것으로 시작합니다.

그런 다음 ResourceCard 함수를 설정합니다. 이 함수는 ResourceList 에서 전달되는 매개변수를 허용하지 않으면 작동하지 않습니다. 이 함수에 {summary, name, url, image}를 포함함으로써 부모 구성 요소와 자식 구성 요소 간의 데이터 흐름을 용이하게 합니다.
ResourceCard 반환은 매핑된 데이터를 표시하는 방법을 설정합니다. 다시, 모든 것을 포함하도록 <div>를 설정합니다. 그<div> 내에서 {image}, {name}, {summary} 및 {url} 데이터 포인트에 대한 요소를 생성합니다.

마지막으로 export default ResourceCard가 가져올 수 있도록 ResourceList를 씁니다. 이제 데이터가 각각 개별 카드에 매핑되고 렌더링됩니다resource.

이것이 데이터 매핑 및 구성 요소 간 데이터 전달에 대한 유용한 개요였기를 바랍니다. 한 가지 참고 사항 – 이 예제를 더 쉽게 읽을 수 있도록 모든 참조className를 제거했지만 물론 카드가 매핑되면 스타일을 지정하는 것이 좋습니다. 그것은 재미의 절반입니다 – 적어도 저에게는!