✏️TodoList 날짜순 정렬 방법

• TodoList의 날짜순으로 최신순, 등록순으로 어떻게 보여줄 수 있을까?
• 아래는 구현한 TodoList

1. 리액트 return문

• 우선 최신순, 등록순을 클릭할 수 있게 리액트 return문안에 만들어준다.
• 그리고 <select> 태그안에 onClick={handleUpDown} 눌렀으면 나오는 함수를 만들어준다.
  - <option >에 onClick이 안됨. 그냥 <select> 에 주면 작동됨.

  <select  onClick={handleUpDown} className='sorting'>
            <option >최신순</option>
            <option >등록순</option>
  </select>

2. 상태관리

• 그리고 내림순, 오름순을 나타내는 상태관리를 만들어준다.

const [IsUpDown, setUpDown] = useState("최신순")

3. 정렬함수 설정

• 마지막으로 함수 설정
• 리스트값을 sort로 돌려준다.
• 그리고 option을 클릭했을때 sort로 돌린 값을 리스트 상태로 바꿔준다.
• 각 값의 시간 값은 new Date()로 감싸줘야한다.(안감싸면 작동이 안됨.)

const handleUpDown =(e) =>{
  	//옵션을 클릭했을때 옵션의 값을 가져온다.
    const value : string = e.target.value
  // 최신순 리스트로 정렬 함수(sort)
    const newList = ()=> todoItem.sort(function(a,b) {
      //기존 할일리스트의 생성일로 비교
      //시간를 new Date()로 감싸줘야한다.
      return new Date (b.createdAt) - new Date (a.createdAt);
    });
  // 등록순 리스트로 정렬 함수
    const oldList = () =>todoItem.sort(function(a,b) {
      return new Date(a.createdAt) - new Date(b.createdAt)
    });
    // 옵션의 값이 '최신순'이면 상태를 '최신순'으로 바꾸고 
   // 각 맞는 정렬함수를 넣어준다.
    if(value === '최신순'){
      setUpDown('최신순')
      return setTodoItem(newList())
    }else if(value === '등록순'){
      setUpDown('등록순')
      return setTodoItem(oldList())
    }
  }

💁‍♀️완성 페이지

아싸 완성!!