React sort Rendering

❗️코딩애플 React - 'URL 파라미터로 상세페이지 100개 만들기'를 수강하고 숙제를 하는 과정에서 렌더링의 중요성을 알게 되었다.

코딩애플 쇼핑몰 프로젝트 데이터
data.js

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;

숙제 내용

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

상품 순서를 가나다순으로 변경하는 버튼을 만들어버렸다고 가정합시다.
그거 누르면 shoes라는 state안의 상품이 가나다순으로 정렬됩니다.
→❗️해당 게시글에서 다룰 주제

그럼 "Grey Yordan"이 0번 상품(배열 0번째)이 되겠군요.

그럼 평소엔 /detail/0으로 접속하면 0 번째 상품을 보여주니까 "white and Black" 이 뜰텐데
버튼 누른 후엔 /detail/0으로 접속하면 0번째 상품을 보여주니까 "Grey Yordan" 이 뜨겠군요.
이처럼 상세페이지가 불규칙해지는 문제는 어떻게 해결하면 좋을까요?

숙제 과정

✨ 숙제를 하는 과정에서 가나다순으로 변경하는 버튼을 만들려고 하였다. sort 메서드를 이용하여
let [shoes,setShoes] = useState(data);
shoes 변수를 sort 메서드로 정렬하였다. 그리고 shoes 값은 정렬된 값으로 변경이 되었지만 화면상에 출력된 결과가 나타나지 않았다.
문제점은 리액트가 재렌더링이 발생하지 않았기 때문이다.
그래서 재렌더링을 발생시키기 위한 조건인 state(상태) 변경이 있을 때를 만족시키기 위해서 setShoes를 조작해야 된다.
그리고 마지막으로 data값이 저장된 shoes를 직접적으로 조작하는 것 보단 복사본을 만들어서 setShoes로 상태값을 변경해주는게 원본 배열의 값을 유지하는게 좋은 방식이다.

리액트 재렌더링 조건

App.js

import { useState } from 'react';

function App() {
  let [shoes,setShoes] = useState(data);
  //정렬 함수
  const onSort = ()=>{
    let copy = [...shoes]
    console.log(copy)
    copy.sort((a,b)=>{
      if(a.title > b.title) return 1;
      if(a.title < b.title) return -1;
      return 0;
    })
    setShoes(copy);
  }
  return (
    <div className="App">
 		<Button onClick={()=>{ onSort() }}>sort</Button>
    </div>
  );
}
export default App;

맨 위에 있는 코드 data.js는 배열안이 객체로 이루어져 있다. 이러한 객체 안의 프로퍼티 값에 따라 '가나다순'으로 정렬하는 방법은 아래 주소를 참조하면 된다.
https://developer-talk.tistory.com/314