React : find ( ) 함수를 통해 데이터를 찾아보자!

find

강의를 보게 되면서 알게된 함수  find 자바스크립트 에서도 쓰이는데 React에서도 사용해보자!

 

만약 쇼핑몰 카트가 있다고 과정을하자 그럼 그상품의 데이터들이 있겠죠?data라는 [ ]배열안에 { }객체가 있고 그안에 상품이 있다.

let data=
[
  {
    id : 0,
    title : "White and Black",
    content : "Born in France",
    price : 120000
  },

  {
    id : 1,
    title : "Red Knit",
    content : "Born in Seoul",
    price : 110000
  },

  {
    id : 2,
    title : "Grey Yordan",
    content : "Born in the States",
    price : 130000
  }
] 

export default data

내가 원하는 개발 구현은 상품1을 눌렀을때 그 상품의 디테일한 페이지가 나오게  하고싶다.

그럼 내가 정해놓은 상품의 data 의 id가 url의 파라미터값으로 가져온 id와 맞는지 비교를 해봐야한다.

 

이설명을 하기전에 useParam ( ) 훅을 통해 url의 파라미터를 얘기해보려고 한다.

 

Route 를통해 url을 :id 파라미터 값을 받게 해놓고 그 경로는 ShoseDetail 페이지로 가게 코드를 짜놨다.

 

 

여기서 ShoseDetail 컴포넌트에서 코드를 짤때 find 라는 함수가 쓰인다.

그 이유는 url에 받아오는 id와 data의 id가 동일할때 그 값을 찾아줘 라는 코드를 짤거기 때문이다.

 

 

 ShoseDetail .js

import React from 'react'
import {useParams} from 'react-router-dom'
export const ShoseDetail = ({shoes}) => {

  let {id} = useParams()
  let 찾은상품 =shoes.find((data)=>{return data.id == id})
  console.log("어떤게 나와?",찾은상품)
  return (
    <div className="container">
    <div className="row">
    <div className="col-md-6">
      <img src={"https://codingapple1.github.io/shop/shoes"+(id)+".jpg"} width="100%" />
    </div>
    <div className="col-md-6">
      <h4 className="pt-5">{찾은상품.title}</h4>
      <p>{찾은상품.content}</p>
      <p>{찾은상품.price}원</p>
      <button className="btn btn-danger">주문하기</button> 
    </div>
  </div>
</div> 
  )
}

 

find사용법

 shoes.find((data)=>{return data.id == id })

 

여기서  shoes는 위에 data를 담아놓은 아이이고 그걸 find 함수를 써서  콜백함수를 써주는데

콜백함수안에 현재요소이고 그 요소의 id 가 == 파람으로 가져온 id와 동일한지? 그게 true이면 찾은상품 변수에 넣어주는것이다.