최근 본상품관련 질문입니다.

[박현수]

import "./SideBar.modul.css";
import { useNavigate } from "react-router-dom";

const SideBar = (props) => {
  let newItem = props.latestItem;

  let deduplication = newItem.filter(
    (arr, index, callback) =>
      index === callback.findIndex((t) => t.key === arr.key)
  );
  deduplication.length = 2;

  let navigate = useNavigate();

  return (
    <div className="sideBar">
      <div
        onClick={() => {
          // 배열의 안의 이미지를 클릭했을때 어떤 이미지를 클릭했는지 확인하는 방법
          navigate(`/detail${deduplication[0].key}`);        
        }}
      >
        {deduplication}
      </div>
    </div>
  );
};

export default SideBar;

메인 화면에서 상품을 클릭하면 클릭한 이미지가 배열로 들어오고 그 배열이 보이게 만들었는데요...  

온클릭을 이용해서 클릭한 이미지의 상품 디테일 페이지로 가는 기능을 구현하고싶습니다.. 

제 생각에는..

(각 상품별 디테일 페이지를 /detail${id} 로 만들어 두었습니다.)

(사용하게 되는 상품 이미지에 id를 추가 해두었습니다.)

최근 상품의 배열에 각각의 이미지를 클릭하면 그 이미지의 고유 id를 이용해서 디테일 페이지를 온클릭 안의  navigate(`/detail${deduplication[X].id }`)를 이용해서 이동

이렇게 생각을 했는데..

deduplication[X].id에서 X에 뭘 넣어야할지 모르겠습니다..ㅠㅠ

수동으로 0,1을 집어 넣으면 이동이 가능한데..

0번을 클릭하면 x가 0 으로 1을 클릭하면 1로 바뀌게 하는게 어떻게해야 가능할가요..?

[codingapple]

state아니면 변수 만들어놓고 이미지를 클릭할 때 마다 state를 원하는 숫자로 변경하면 됩니다 

아니면 SideBar컴포넌트를 반복문으로 돌리고 있거나 그러면 반복문 안의 i변수 같은거 활용해도 될듯요 

[박현수]

넵 감사합니다 둘다 시도해 볼께요

[박현수]

질문 설명을 이상하게했나봐요 ㅠㅠ 클릭한 이미지의 고유값을 찾는 방법을 물어봤어야하는데 머리속에 정리가 안되다보니 엉뚱한 질문을 했네요;;;

 

import "./SideBar.modul.css";
import { useNavigate } from "react-router-dom";

const SideBar = (props) => {
  let newItem = props.latestItem;

  let deduplication = newItem.filter(
    (arr, index, callback) =>
      index === callback.findIndex((t) => t.key === arr.key)
  );
  deduplication.length = 2;

  let navigate = useNavigate();

  return (
    <div className="sideBar">
      <div
        onClick={(e) => {
          props.setMapNum(Number(e.target.alt));
          navigate(`/detail${e.target.alt}`);
          console.log(e.target.alt);
        }}
      >
        {deduplication}
      </div>
    </div>
  );
};

export default SideBar;

클릭한 것의 값을 어떻게 확인하는지 구글링하다보니 e.target 이 눈에 들어와서 아맞다! 하고 e.target.alt를 이용해서 해결했습니다 ㅎㅎ

[박현수]

아 그리고 추가로 상품 이미지가 3개 인데요.. 혹시 더보기 눌렀을때 나오는 상품 이미지들은 어디서 받을수있을가요..??

[codingapple]

https://github.com/codingapple1/codingapple1.github.io/tree/master/shop

7개밖에 안만들어놨습니다 

[박현수]

감사합니다.

[글쓴이]

글