데이터 두가지 기준 정렬, 함수 이용해 표로 만들기

• api를 get 해왔을때 많은 데이터가 정렬 없이 한 배열 안에 담겨오는 상황
• 난 두가지 기준에 의해 데이터를 정렬 & 그리고싶었는데 기준 하나로만 map을 돌려봤기때문에 생각보다 오래 걸렸고 그 과정에서 새로 써본 기능들이 많았기 때문에 정리해놓음

const dataList = 
      
    [
        {
          reg_date: "2023-11-06",
          number: 10,
          breed: "cat",
        },
        {
          reg_date: "2023-11-06",
          number: 9,
          breed: "dog",
        }
     	{
          reg_date: "2023-11-06",
          number: 8,
          breed: "dog",
        },
        {
          reg_date: "2023-11-06",
          number: 7,
          breed: "dog",
        }...
  	]

// -> 한 배열에 object 형식의 데이터들이 담겨져 넘어오는데, 
// 열은 날짜 순, 행은 number 순으로 & 두 지점이 만나는 곳에는 breed가 표시
      

통으로 오는 데이터 형식을 이 표처럼 만들고 싶었다.

 // object 하나하나를 object.reg_date 로 뺀다.
  const dates = dataList?.map((data1) => data1.reg_date);
  // new Set => 데이터 간의 중복 값을 생략함
  // 세트를 배열로 변환
  const dateList = Array.from(new Set(dates));

  // 중복되는 숫자를 없애고 리스트로 반환
  const numbers = dataList?.map((data1) => data1.number);
  const numberList = Array.from(new Set(numbers))

// 날짜 순서대로 아이템 조회 후 새 배열로 만들기 (11.01일 배열/11.02배열 ..)
  const detailList = dateList.map((enumDate) => {
    return dataList?.filter((data1) => data1.reg_date === enumDate);
  });

// console.log(detailList,'detail') -> 날짜별로 새 배열들에 담긴 이중배열이 된다.

// 화면에 그려지는 코드

	{numberList?.map((item, index) => {
 		return (
           <div key={index}>
             <div>{item}</div> // 맨 윗줄에 중복되는 수를 지운 number를 순서대로 넣고, (10,9,8 ...)
             <div className='bg-red-100'>
                {detailList.map((item, idx) => {
                  // 날짜별로 구분되어진 배열에 number를 넣어서, 일치하는 값이 있으면 그것이 return 되도록.
                  return (
                    <div key={idx}>
                      <p>
                        {numberFilter(item, numberList[index])}
                        // 날짜별로 구분되어진 배열 & numberList 에 인덱스를 넣어서 나온 값을 넘기는 함수
                      </p>
                    </div>
                  );
                })}
             </div>
           </div>
		);
	})}


    
    // 날짜 구분 배열에 number 를 넣었을때, 일치하는 값이 있을때 그 값을 return 하는 함수
    
    function numberFilter(dailyList: any, number: number) {
      const findItem = dailyList.find((daily: any) => {
        return daily.number === number;
      });
    }