[REACT] 최신순 오래된순 필터링, 중복 필터링

import { useEffect, useState } from "react";

//select의 리스트 만들기
const sortOPtionList = [
  { value: "lastest", name: "최신순" },
  { value: "oldest", name: "오래된 순" },
];
//select의 틀만들기, 값, 값을 변하게하는 함수, 리스트
const ControlMenu = ({ value, onChage, optionList }) => {
  return (
    <select value={value} onChange={(e) => onChage(e.target.value)}>\
    //해당 리스트 출력
      {optionList.map((it, idx) => (
        <option key={idx} value={it.value}>
          {it.name}
        </option>
      ))}
    </select>
  );
};

const DiaryList = ({ diaryList }) => {
  //최신순, 오래된순 상태관리
  const [sortType, setSortType] = useState("lastest");
  // sort 시켜서 리스트 출력하는 함수
  const ⭐getProcessdDiaryList = () => {
    const compare = (a, b) => {
      if (sortType === "lastest") {
        //문자열이 올수도 있으니까 parseInt로 묶어주기
        return parseInt(b.date) - parseInt(a.date);
      } else {
        return parseInt(a.date) - parseInt(b.date);
      }
    };
    //배열 깊은 복사
    const copyList = JSON.parse(JSON.stringify(diaryList));
    // 해당 리스트를 compare 함수 기준으로 sort하기 
    const sortedList = copyList.sort(compare);
    return sortedList;
  };
  return (
    <div>
      <ControlMenu
        value={sortType}
        onChage={setSortType}
        optionList={sortOPtionList}
      />
    // 리스트말고 함수를 반환
      {⭐getProcessdDiaryList().map((it) => (
        <div key={it.id}>{it.content}</div>
      ))}
    </div>
  );
};

DiaryList.defaultProps = {
  diaryList: [],
};

export default DiaryList;

• 감정 필터 추가

import { useEffect, useState } from "react";

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

const filterOptionList = [
  { value: "all", name: "전부다" },
  { value: "good", name: "좋은 감정만" },
  { value: "bad", name: "안좋은 감정만" },
];

const ControlMenu = ({ value, onChage, optionList }) => {
  return (
    <select value={value} onChange={(e) => onChage(e.target.value)}>
      {optionList.map((it, idx) => (
        <option key={idx} value={it.value}>
          {it.name}
        </option>
      ))}
    </select>
  );
};

const DiaryList = ({ diaryList }) => {
  const [sortType, setSortType] = useState("lastest");
  // 감성 상태 스테이트
  const [filter, setFilter] = useState("all");

  const getProcessdDiaryList = () => {
    // 감정 필터 함수 만들기
    const filterCallBack = (item) => {
      if (filter === "good") {
        return parseInt(item.emotion) <= 3;
      } else {
        return parseInt(item.emotion) > 3;
      }
    };
    const compare = (a, b) => {
      if (sortType === "lastest") {
        return parseInt(b.date) - parseInt(a.date);
      } else {
        return parseInt(a.date) - parseInt(b.date);
      }
    };
    //배열 깊은 복사
    const copyList = JSON.parse(JSON.stringify(diaryList));
	//감정 필터 
    const filterList =
      filter === "all" ? copyList : copyList.filter((it) => filterCallBack(it));
    //감정 필터된 리스트를 비교
    const sortedList = filterList.sort(compare);
    return sortedList;
  };
  return (
    <div>
      <ControlMenu
        value={sortType}
        onChage={setSortType}
        optionList={sortOPtionList}
      />
    // 감정 필터
      <ControlMenu
        value={filter}
        onChage={setFilter}
        optionList={filterOptionList}
      />
      {getProcessdDiaryList().map((it) => (
        <div key={it.id}>
          {it.content} {it.emotion}
        </div>
      ))}
    </div>
  );
};

DiaryList.defaultProps = {
  diaryList: [],
};

export default DiaryList;