react route 3

url 경로에 적은 데이터를 페이지끼리 주고받는 방법에 대해 정리
1. url Parameter
2. userParams

url Parameter

url에 사용자가 적은 데이터.
문자가 될수도 있고, 숫자가 될 수도 있는데, 아무튼 그걸 가지고 지지고 볶는건 개발자의 몫.

/경로/경로2/경로depth는의미없음/:특정문자

이렇게 쓰면, /:특정문자 부분에 사용자가 입력한 값이 들어온다.
상세페이지 등을 Route 태그 등으로 미리 만들어야 하는데, 반복문 등으로 수십 수백개 만들 일이 없어 좋아보임.

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

userParams

이 파라미터값을 받는 hook.
디테일 페이지가 따로 js파일로 빠져있는 컴포넌트고,
App.js에서 파라미터값을 보냈다 가정.
아래와 값이 쓰면 그 파라미터 값을 받아올 수 있음.

//Detail.js
import { useParams, useNavigate } from "react-router-dom";
  let { id } = useParams();

파라미터값을 받아와 서버 데이터에 존재하는 값인지 등을 체크하면 좋을 것 같음.

뻘짓

강의에서 숙제가 나왔다.
사용자가 url에 입력한 값대로 상세페이지를 라우팅하려면?(정렬버튼등으로 state가 꼬여도 잘나오도록)
이런 내용의 숙제였다.

내가 푼 방식

1. :url 파라미터로 유저입력을 잘 라우팅
2. 상세페이지에 useParams로 :id값 가져오기
3. 가져온 :id값으로, filter등의 문법을 이용하여 data.js의 각 오브젝트에 들어가있는 id값 중에서 사용자가 입력한 :id과 일치하는 데이터를 가져오도록 Detail.js 변경.
   • if문으로 입력값이 데이터에 없으면 없다고 알려주는것도 좋을듯

3번을 하다 좀 삐끗했는데, filter로 사용자가 입력한 :id값과 일치하는 오브젝트를 선별하는것까지는 좋았으나 새로운 배열이 재렌더링.... 그러니까 오브젝트를 원했는데 1개 오브젝트가 들어있는 '배열'을 얻었다.
아무튼 뭐 어찌됐든 필터링은 됐다는 마인드로, 꼬리 2개달리고 다리 7개인 고양이를 계속 그려감.

//App.js
  let [shoes] = useState(data); //Data.js에서 받아온 데이터.

        <Route
          path="/detail/:id" // url Parameter로 유저가 입력한 값을 받음.
          element={
            <div>
              <Detail shoes={shoes} /> //props로 넘기기
            </div>
          }
        />
//Detail.js
  let { id } = useParams(); // 유저가 입력한 값을 가져옴
//id가 {id}인, 1개 오브젝트가 들어있는 '배열'을 가져옴.
  const shoesOne = props.shoes.filter((shoesOne) => shoesOne.id == id);
//if문 걸어서, 대충 유저가 입력한 id값이 props로 받아온 data중에 없는지 배열길이로 체크.
if (shoesOne.length == 0) {
    return (
      <div>
        <div>없는 상품입니다.</div>
        <button
          onClick={() => {
            navigate(-1);
          }}
        >
          뒤로가기
        </button>
      </div>
    );
  } else {
    return (
			.
      		.
      		.
      		//배열의 첫번째(하나밖에 어차피 없으니까) 오브젝트에서 값 꺼내기
            <h4 className="pt-5">{shoesOne[0].title}</h4>
            <p>{shoesOne[0].content}</p>
            <p>{shoesOne[0].price}</p>
            <button className="btn btn-danger">주문하기</button>
          </div>
        </div>
      </div>
    );
  }
};

챗지피티의 세련된 코드

find함수를 사용하여 조건과 일치하는 첫 번째 요소를 받아 바로 오브젝트를 얻음
이게 더 이뻐보이니 슬쩍 내가 한것처럼 쌔빔.

let { id } = useParams(); // 유저가 입력한 URL 파라미터값
const shoesOne = props.shoes.find((shoesOne) => shoesOne.id == id);