배열 안 객체 내림차순으로 정리하기

 

토이 프로젝트에서 더미 데이트를 작성했습니다. 

더미데이터는 배열 안의 객체의 나열로 만들었습니다. 

 

지금은 id의 숫자를 기준으로 오름차순으로 화면에 나타나는데, 저는 내림차순으로 화면에 나오게 하고 싶었습니다. 

 

---

실습

const arr = [{p:1},{p:2},{p:3},{p:4},{p:5}]

 

arr.sort((f,s) => {
  const idF = f.p;
  const idS = s.p;
  if(idF > idS) {
    return -1;
  } 
  if(idF < idS) {
    return 1;
  }
  return 0;
} )

 

결과

[
  { p: 5 },
  { p: 4 },
  { p: 3 },
  { p: 2 },
  { p: 1 }
]

---

실제 코드

 

function Data({ data, setData }) {
  // dummydata 내림차순으로 정리하기
  const sortedData = data.sort((f, s) => {
    const idF = f.id;
    const idS = s.id;
    if (idF > idS) {
      return -1;
    }
    if (idF < idS) {
      return 1;
    }
    return 0;
  });

  return (
    <div>
      {sortedData.map((data) => {
        return (
          <li key={data.id} className='data-list'>
            <DiariesDate date={data.date}></DiariesDate>
            {/* <div>{data.date}</div> */}
            <div>{data.weight}kg</div>
            <img src={data.photo} />
            <div>{data.exercise}</div>
            <div>{data.story}</div>
            <span id='deleteBtn'>
              <FontAwesomeIcon
                icon={faTrashCan}
                onClick={() => {
                  deleteBtnHandler(data.id);
                }}
              />
            </span>
            <span id='updateBtn'>
              <FontAwesomeIcon
                icon={faPenNib}
                // onClick={() => {
                //   updateBtnHandler(data.story);
                // }
                // }
              />
            </span>
          </li>
        );
      })}
    </div>
  );
}

 

저는 sortedData라는 새로운 변수를 선언해서 할당해주고, return 안에 넣어주었습니다. 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓