React : 비디오 필터 기능

오늘은 필터에 따라 비디오의 리스트를 출력하는 기능을 만들었다.
정확히 말하면 비디오를 출력하는 기능은 내일로 미루었다. 생각보다 필터를 설정하는 부분이 까다로웠기 때문이다.

export default function Recent(props: Props) {
  const [filter, setFilter] = useState<FilterInterface>({
    keyword: "",
    order: orderObject.DESC,
    sort: sortObject.date,
  });

  return (
    <div>
      <Filter user={props.user} filter={filter} setFilter={setFilter} />
      <VideoList />
    </div>
  );
}

나는 필터 객체를 만들고 이 객체안의 값이 변할때마다 VideoList에 필터 정보를 보내 백엔드와 통신하면 되리라 생각했다.

그러니 필터에 따라 비디오를 출력하는 컴포넌트를 만들고 그 안에 필터 리스트를 출력하는 Filter컴포넌트를 만들고 filter State를 바꿀수 있는 함수를 매개변수로 보낸다. 라고 생각했다.

처음에는 함수 하나로 모두 처리할 수 있지 않을까 생각했다.
매개변수를 {keyword : '키워드'} 처럼 {order } , {sort} 로 나누어 만드는 방식을 생각했다.

  const example = (value : {keyword : string} 
  | {order : string} | {sort : string}) => {}

이러한 느낌을 생각했는데 결론은 "글쎄..?"였다.

ts에서 인터프리터가 value가 keyword의 key를 갖는경우, order의 key를 갖는 경우를 나누어 생각했기때문에 분기처리가 생각보다 까다로웠다.

결과적으로

버튼을 클릭하면 모달이 출력되도록 만들었고 버튼을 클릭하면

값이 변하도록 만들 수 있었다.

Swiper를 이해하고 모달을 만드는데 생각보다 어려움을 겪었다.

항상 이전에 작성해놓은 코드를 어떻게하면 재사용할 수 있을까? 라는 생각때문에 시간을 많이 잡아먹는다. 그래도 이런 고민이 나의 실력을 키워주리라 믿어 의심치 않는다.