React로 날짜별로 정렬하는 콤보박스 만들기

날짜, 시간으로 정렬하는 콤보박스

1. 우선 'latest' 최신순을 기본값으로 갖는 useState를 하나 생성한다.

JSX에서 state를 value로 넣고, setState를 onChange로, sort될 목록인 optionList는 sortOptionList를 받는 ControlMenu

const [sortType, setSortType] = useState('latest');

<ControlMenu value={sortType} optionList={sortOptionList} onChange={setSortType} />

2. 최신순 객체과 오래된순 객체가 담긴 배열 sortOptionList

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

3. ControlMenu는 value, onChange, optionList라는 파라미터를 가지고 select 태그와 optionList를 매핑해서 담은 option태그로 sortOptionList배열을 화면에 뿌려준다. 

cosnt controlMenu =({value, onchange, optionList})=> {
 return (
 <select value={value} onChange={(e)=>onChange(e.target.value)}>
 {optionList.map((item,index)=> (
	 <option key={item.index} value={item.value}> //value = ['latest','oldest']
 	{item.name} //name = ['최신순', '오래된순']
 	</option>
	 ))}
 </select>
 )
}

4. 여기까지 하면 원하는 값이 담긴 select_option으로 콤보박스가 생긴다. 콤보박스가 제대로 작동하기 위해서는 아까 만들어둔 useState의 상태를 관리해줘야 한다.

const getProcessedDiaryList =()=> {
	const compare=(a,b)=> {
	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;

}

JSON.parse() : JSON문자열을 분석해서 객체를 생성함
JSON.stringify() : JS값이나 객체를 JSON문자열로 변환함 

여기서 diaryList는 상위 컴포넌트에서 props 받아온 data인데, date는 DiaryStateContext.Provider로 컴포넌트 전체에 전달되는 data이고, 상위 컴포넌트인 App에서는 data를 useReducer로 관리하고 있다. 

const [data, dispatch] = useReducer(reducer, dummyData); 

즉, diaryList는 dummyData에 해당한다. 

이렇게 배열을 정렬하기 전에는 복사본을 사용해야 한다. 원본이 변경되면 안되기 때문이다.

 

5. JSX에서 정렬된 배열 getProcessedDiaryList을 매핑해서 뿌려주면 끝!

{getProcessedDiaryList().map(item=> (
<span key={item.id}>{...item}</span>
))}

 

6. 만약 날짜 외의 다른 조건으로 동시에 정렬 (ex. 날짜 정렬 > 감정 정렬) 하고싶다면 위의 1~5와 동일한 방식으로
getProcessedDiaryList안에서 다른 조건을 넣어 정렬하면 된다.