미라클 메모리

목차

Control 메뉴 구현하기

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

<SelectBox
	value={filter}
	onChange={setFilter}
	optionList={filterOptionList}
/>

프로젝트에서 SelectBox를 통해서 Select태그를 구현했다. SelectBox를 통해서 3개의 인수를 전달받는다.

// SslectBox 구현하기

const SelectBox = ({ value, onChange, optionList }) => {
  return (
    <ControlMenu value={value} onChange={(e) => onChange(e.target.value)}>
      {optionList &&
        optionList.map((list, index) => (
          <Option key={index} value={list.value} name={list.name} />
        ))}
    </ControlMenu>
  );
};

value값은 sortType의 상태값으로 전하고 onChange라는 이름은 sortType 상태변화 함수를 props로 넘긴다. optionList는 uitll 함수에있는 OptionList를 의미한다.

onChange를 통해서 상태변화함수 값 변경하기

Select태그에 onchange이벤트를 걸어준다. 그런다음에 전달받은 event의 value값을 콜백을 통해 상태변화 함수에 넘겨준다. 따라서 select 태그 값에 의해서 변경되는 값은 곧 sortType의 상태값이 된다.

깊은 복사를 통해서 전달받은 props 불변성 유지하기

json.parse통해서 원본 데이터를 직렬화(데이터를 브라우저가 읽을 수 있는 문자열로 변경) → 역직렬화(문자열 데이터를 다시 객체형태로 변경)를 통해서 깊은 복사를 할 수 있다

const copyList = JSON.parse(JSON.stringify(diaryList));

왜 불변성을 유지해야할까?

그것은 전달받은 diaryList의 타입이 참조타입이기 때문이다. 만약 깊은 복사를 하지 않고선 객체의 갚에 접근하여 임의로 데이터의 값을 변경하면 전달받은 diaryList에 할당된 값이 직접적인 영향을 받게된다. 그렇기에 데이터를 직접 변경해서는 안되며 깊은 복사를 통해서 새로운 객체를 반환해야한다.

최신순 오래된 순 구현하기

export const getProcessedDiaryList = (filter, sortType, diaryList) => {
	...
  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;
};

copyList 함수는 전달받은 diaryList를 깊은 복사를 진행했다. 그런 다음 복사된 객체를 sort함수를 사용하여 정렬을 해준다. 이때 compare함수를 전달함으로써 객체를 정렬한다. 조건식에 따라서 sortType이 latest일 경우를 제외한 나머지 상황은 오래된 순으로 배열이 되게끔한다