[React] 꿈 일기 기록 사이트 제작 일지-5. 일기 정렬 기능 및 페이지 이동 버튼 구현

Home.js에서 일기 리스트 렌더링 부분만 빼서 새로운 DiaryList라는 컴포넌트를 만들었다.

이 DiaryList 컴포넌트에서 일기 검색창, 일기 정렬 드롭다운, 일기 작성 버튼, 일기 리스트 렌더링을 수행한다 .

형광펜 칠한 부분을 DiaryList 컴포넌트에 구현한다.

 

일기 정렬 및 일기 작성 페이지로 이동 

import { useState } from "react";
import Button from "../components/Button";
import { useNavigate } from "react-router-dom";

const sortOption = [
  { value: "latest", name: "최신순" },
  { value: "oldest", name: "오래된 순" },
];

//최신순, 오래된 순 출력해주고 각 값을 선택하면 그에 맞춰 setSortType을 바꿔주는 컴포넌트
const ControlMenu = ({ value, choosOption, optionList }) => {
  return (
    <select value={value} onChange={(e) => choosOption(e.target.value)}>
      {optionList.map((it, idx) => (
        <option key={idx} value={it.value}>
          {it.name}
        </option>
      ))}
    </select>
  );
};

const DiaryList = ({ diaryList }) => {
  const navigate = useNavigate(); //페이지 이동
  const [sortType, setSortType] = useState("latest");

  //정렬한 값을 리턴해주는 함수
  const getSortedDiaryList = () => {
    const compare = (a, b) => {
      //options 값에 따라 정렬 방법이 달라진다. 
      if (sortType === "latest") {
        //내림차순
        return parseInt(b.date) - parseInt(a.date);
      } else {
        //오름차순
        return parseInt(a.date) - parseInt(b.date);
      }
    };

    //일기 복사
    const copyList = JSON.parse(JSON.stringify(diaryList));
    //복사한 일기를 정렬
    const sortedList = copyList.sort(compare);
    //정렬한 일기리스트를 리턴
    return sortedList;
  };

최신순, 오래된 순으로 일기를 정렬하는 드롭다운을 구현하기 위해 <option>태그를 사용했다.

sortOption에서 일기를 정렬할 두 가지 기준을 미리 정의해 주고 ControlMenu 컴포넌트를 통해 사용자가 선택한 값에 따라 sortType state를 변경해 준다.

getSortedDiaryList()는 일기 리스트 값을 복사해 sortType 값에 따라 정렬한 뒤 정렬한 일기를 리턴해주는 함수이다. 원본 리스트를 손상시키지 않기 위해 일기 리스트의 복사를 진행한다. 

 

  return (
    <div>
      <ControlMenu
        value={sortType}
        choosOption={setSortType}
        optionList={sortOption}
      />
      <Button
        type="positive"
        text="새 일기 작성"
        onClick={() => navigate("/new")}
      />
      {getSortedDiaryList().map((it) => (
        <div key={it.id}>{it.content}</div>
      ))}
    </div>
  );
};

export default DiaryList;

 

return 문 내에서는 위에서 생성한 드롭다운 컴포넌트, 일기를 작성할 수 있는 /new 페이지로 이동할 수 있는 새일기 작성 버튼을 출력한다. 

getSortedDiaryList()를 통해 정렬된 일기 리스트를 화면에 렌더링한다. 

 

 

 

기능은 완성되었으니 CSS로 스타일링해주면 아래와 같은 화면이 완성된다.

 

 

 

 

페이지 구현: 홈(Home)-DiaryList 컴포넌트 분리, 일기 정렬 기능 및 페이지 이동 버튼 구현 · Yoonyesol/

 

페이지 구현: 홈(Home)-select, button CSS 스타일링 · Yoonyesol/Dream_note@2a524d8