2023-05-10

-상세페이지에 상품명 넣기
shoes는 App 컴포넌트에 있으니 App -> Detail 이렇게 전송하면 쓸 수 있겠다.

<Route path="/detail" element={ <Detail shoes={shoes}/> }/> 

1. App.js 안에 Detail 쓰는 곳에서 일단 props 전송하고

<div className="container">
      <div className="row">
        <div className="col-md-6">
          <img
            src="https://codingapple1.github.io/shop/shoes1.jpg"
            width="100%"
          />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">{props.shoes[0].title}</h4>
          <p>{props.shoes[0].content}</p>
          <p>{props.shoes[0].price}원</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>

2. detail.js에 props파라미터 등록함으로써 shoes 자유로게 사용 가능하게 되었음.
   결과물은 아래처럼 나옴.
   

자 이제 상세페이지에 들어가면 0번째 정보만 계속 나오는데 우리의 상품은 3개다. 3개 다 나오게 하려면 어떻게 해야할까?
Route를 쓰면 페이지 하나를 만들 수 있다고 했으니까... Route를 3개 만든다?
그것도 방법이긴 한데 너무 하드 코딩이잖아. 지금이야 연습이라 3개 뿐이지. 실제로는 100만개 이상 만들어야할텐데

다른 방법 사용 가능하다.

-URL파라미터 : 페이지를 여러개 만들고 싶을 때 사용

<Route path="/detail/:id" element={ <Detail shoes={shoes}/> }/>

path 작명할 때 /:어쩌구~ 이렇게 사용하면 "아무 문자"를 뜻한다.
그래서 바로 위에 코드를 해석해보자면 '주소창에 /detail/아무거나 입력했을 때 Detail컴포넌트를 보여줘라'라는 뜻이다.

저렇게 코드 짜면 /detail/0, /detail/1, /detail/2 로 접속해도 Detail컴포넌트를 잘 보여준다.

아니 근데 똑같은 페이지만 보이는 건 똑같잖아!

우리가 컴포넌트 안에 [0]을 보여라고 하드 코딩 해놨기 때문이다. 그걸 바꾸면 되는데 그러면 위에 /detail/0 url 마지막 뒤에 입력된 숫자에 따라 상세페이지를 보여줄 수 있다. 아래처럼 말이다.

<h4 className="pt-5">{props.shoes[현재url에입력된숫자].title}</h4>
<p>{props.shoes[0].content}</p>
<p>{props.shoes[0].price}원</p>
<button className="btn btn-danger">주문하기</button>

1. useParams() 라는 함수를 상단에 import(이거 쓰면 현재 /:url파라미터 자리에 유저가 입력한 값을 가져올 수 있음)
2. 위에서 import 한 것을 변수에 저장해서 사용할 수 있음.

import { useParams } from "react-router-dom";

function Details(props) {
  let {id} = useParams();
  console.log(id);


  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img
            src="https://codingapple1.github.io/shop/shoes1.jpg"
            width="100%"
          />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">{props.shoes[id].title}</h4>
          <p>{props.shoes[0].content}</p>
          <p>{props.shoes[0].price}원</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>
  );
}

export default Details;

/detail/1로 접속하면 id라는 변수에 1이 들어와 1의 정보가 보인다.

<응용문제>
자료의 순서가 변결되면 상세페이지도 고장나는 문제는 어떻게 해결할까요?

자바스크립트엔 .find() 라는 문법이 있는데 이거 쓰면 array 자료안에서 원하는 항목만 찾아올 수 있다.

array자료.find(()=>{ return 조건식 })

이렇게 쓰면 조건식에 맞는 자료를 찾아서 이 자리에 남겨준다.

1. find()는 array 뒤에 붙일 수 있으며 return 조건식 적으면 된다. 그럼 조건식에 맞는 자료 남겨줌

2. find() 콜백함수에 파라미터 넣으면 array자료에 있던 자료를 뜻한다. 전 x라고 작명해봤음

3. x.id == id 라는 조건식을 써봤음. 그럼 array자료.id == url에입력한번호 일 경우 결과를 변수에 담아준다.

그럼 {상품1개} 이런거 남을듯요 출력해보자.

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;

현재 data.js라는 파일에 위와 같은 배열이 있는 상황임

<div className="container">
      <div className="row">
        <div className="col-md-6">
          <img
            src="https://codingapple1.github.io/shop/shoes1.jpg"
            width="100%"
          />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">
            {
              props.shoes.find(function (x) {
                return x.id == id;
              }).title
            }
          </h4>
          <p>{props.shoes[0].content}</p>
          <p>{props.shoes[0].price}원</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>

일일이 props.shoes.find(function (x) {return x.id == id;}).title 이렇게 적어주는 것보다 이걸 하나의 변수로 만들어서 쓰는 게 효율적이므로

function Details(props) {
  let { id } = useParams();
  console.log(id);
  let 찾은상품 =  props.shoes.find(function (x) {
    return x.id == id
  });

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img
            src="https://codingapple1.github.io/shop/shoes1.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>
  );
}

찾은상품이라는 변수를 만들어줬다.
위처럼 하면 data.js라는 파일에서 잘 빼온다.

하.. 어렵다 이해도 잘 안 된다. 이제 막 배우는 단계라 그러겠지? 많이 보다보면 잘 알게 될거야
화이팅!






현재 공부하는 강의: 코딩애플 https://codingapple.com/