TIL - props 로 데이터 값을 받아오자

Cards 컴포넌트를 아래와 같이 만들어주면서 아예 Cards 컴포넌트에서 전체 데이터 값을 불러와서 사용할 수 있었다.

 

Problem

---

하지만 프로젝트 기획대로 데이터를 카테고리값에 따라 분류해주고 싶었고 그렇게 적용해줘야하는 카테고리 수는 적어도 4가지 이상..! 

// 기존 Cards Component

import React from 'react'
import { styled } from 'styled-components'
import { useNavigate } from 'react-router-dom'
import { useQuery } from 'react-query'
import { getPosts } from '../axios/api'

function Cards() {
  const navigate = useNavigate()

  // useQuery로 데이터 전체 불러오기
  const { isLoading, isError, data } = useQuery('infos', getPosts)
  // console.log('See if data is coming to Cards', data)

  if (isLoading) {
    return <h1>아직 로딩 중</h1>
  }
  if (isError) {
    return <h1>오류 발생</h1>
  }

  const navigateToDetailHandler = (id) => {
    navigate(`/details/${id}`)
  }

  return (
    <>
      <div>
        {data.map((item, index) => (
          <div key={index} onClick={() => navigateToDetailHandler(item.id)}>
            <div>{item.category}</div>
            <div>{item.title}</div>
            <div>{item.body}</div>
            <div>{item.director}</div>
            <div>{item.createdBy}</div>
          </div>
        ))}
      </div>
    </>
  )
}

export default Cards

 

 

Solve

---

필요한 값을 구하고 이를 props로 내려줘 필요한 값을 mapping 해주는 코드를 만들어야 했다. 아래와 같이 변경!
메인페이지에서 설정한 categoryResults 값을 props로 내려주면서 필요한 값을 간편하게 mapping 해줄 수 있었다!

// MainPage.jsx

      {/* Show the selected category's card list */}
      {selectedCategory && (
        <div>
          <h2>Results In ... {selectedCategory}</h2>
          <div>카테고리별 카드리스트</div>
          <Cards data={categoryResults} />
        </div>
      )}

// 변경된 Cards Component

import React from 'react'
import { styled } from 'styled-components'
import { useNavigate } from 'react-router-dom'

function Cards({data}) {
  const navigate = useNavigate()

   const navigateToDetailHandler = (id) => {
    navigate(`/details/${id}`)
  }

  return (
    <>
      <div>
        {data.map((item, index) => (
          <div key={index} onClick={() => navigateToDetailHandler(item.id)}>
            <div>{item.category}</div>
            <div>{item.title}</div>
            <div>{item.body}</div>
            <div>{item.director}</div>
            <div>{item.createdBy}</div>
          </div>
        ))}
      </div>
    </>
  )
}

export default Cards

 

이 문제를 해결한 바로 이 순간에 props 사용법에 대해 뭔가 아하 하면서 깨달았고 다시 쓸 수 있겠다는 생각이 들어서 반드시 기록-