[사이드 프로젝트] React-slick + typescript

typescript를 활용하여 사이드 프로젝트를 진행해 보았다.

 

캐러셀을 활용하여 강아지 리스트를 보여주는 주제로 선정하였다.

사실 typescript 활용을 1순위 목표로 두었기 때문에 주제 선정은 어렵지 않았다.

 

먼저 사용할 dog 데이터의 타입을 미리 선언해두었다.

export type dog = {
  tags: string[];
  name: string;
  size: number;
  imgSrc: string;
  dogId: number;
  message: string;
  minute: number;
};

 

프로젝트는 프론트에서 임시 state를 만들어 개발하였지만 만약 api 통신을 할 경우 response 타입을 지정할 수 있다.

아래 코드는 axios 반환값인 Promise의 제네릭 타입으로 응답 데이터를 지정하는 예제이다.

export const getDogRandomImg = async () => {
  const apiUrl = "/dog";
  const { data } = await httpClient.get<dog>(apiUrl);

  return data;
};

 

캐러셀을 표현하기 위해 상위 컴포넌트에서 만들어둔 temp 데이터를 props로 넘겨주었다.

이 때 props의 타입을 dog[]으로 선언하였다. 배열안에 dog 타입을 가진 데이터가 1개 이상 넘어 오기 때문에 dog[]으로 선언

만약 useState를 사용할 때 초기상태가 빈 배열인 경우에도 dog[]으로 선언 (빈 배열도 dog[]타입에 해당)

 

캐러셀에서 선택한 강아지의 특정 컬럼은 토스트로 구현하기 위해 onClickBtn 함수를 생성하였다.

이 때 매개변수 또한 dog 타입으로 선언하였고 함수의 반환값이 없기 때문에 void 타입을 지정하였다.

type DogListPropsTypes = {
  dogList: dog[];
};

const DogCarousel = ({ dogList }: DogListPropsTypes) => {

  const [selectedDog, setSelectedDog] = useState<dog>(dogList[0]);
  const [isOpenToast, setIsOpenToast] = useState(false);

  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1, // 한 번에 보여줄 슬라이드 수
    slidesToScroll: 1, // 슬라이드 이동 시 스크롤할 슬라이드 수
    adaptiveHeight: true,
  };

  const onClickBtn = (dog: dog): void => {
    setSelectedDog(dog);
    setIsOpenToast(true);
  };

  const closeToast = () => {
    setIsOpenToast(false);
  };

  return (
    <div className="carousel">
      <Slider {...settings}>
        {dogList.map((dog) => {
          return (
            <div key={dog.dogId} className="card">
              <DogItem dog={dog} onClickBtn={onClickBtn} />
            </div>
          );
        })}
      </Slider>
      {isOpenToast && (
        <DogToast selectedDog={selectedDog} closeToast={closeToast} />
      )}
   </div>
  );
};

 

추가적으로 강아지 이름 검색 기능을 구현해 보았다.

form 태그의 submit 함수와 input 태그의 onChange 함수에 다음과 같이 이벤트 타입을 지정하였다.

const handleSubmit = (e: FormEvent<HTMLFormElement>): void => {
  e.preventDefault();

  if (dogName === "") {
    setDogList(allDogList);
    return;
  }

  const filterDog = allDogList.filter((dog) => dog.name === dogName);

  if (filterDog.length === 0) {
    setDogName("");
    window.alert("검색한 강아지는 존재하지 않습니다.");
    return;
  }

  setDogList(filterDog);
};

const handleChange = (e: ChangeEvent<HTMLInputElement>): void => {
  setDogName(e.target.value);
};

 

다음은 프로젝트 구현 영상이다.

 

결론

하나하나 타입을 지정하는게 처음에는 귀찮은 부분도 있었는데,

코드의 안정성을 높이고, 코드를 읽으면서 어떤 타입이 올지 예측 가능하기 때문에 가독성 면에서도 좋은 것 같다.