[23.03.08] 스터디 회고록 - 이미지 슬라이드(캐러셀) 직접 만들기

배운 점 

---

슬라이드 애니메이션 부드럽게 구현하기

나는 슬라이드를 구현할 때 scrollLeft라는 속성을 사용해서 스크롤바의 위치를 옮겼다. 

 

아래 글을 확인하면 코드도 같이 확인 가능하다. 

[React] 이미지 슬라이드(가로형,버튼O,반응형) 만들기

근데 슬라이드가 부드럽지 못하고, 뭔가 뚝뚝 끊기는 듯한 느낌이 들었다. 애니메이션 효과를 주어 부드럽게 하고 싶었는데, 끝내 거기까지 구현해내지는 못했다. 

 

하지만 다른 팀원 중 한 분이 이를 구현해냈다! 멋져! 그 분 코드를 확인해보니깐 scrollLeft가 아닌 scrollTo를 사용했다. scrollTo 인자로 객체를 주고, behavior라는 키에 smooth 값을 주면 부드러운 애니메이션을 구현할 수 있다. 물론 x축 슬라이드의 위치를 이동하기 위해서는 scrollLeft의 값을 변경해줘야 하기 때문에 left 키의 값으로는 내가 이전에 썼던 코드와 똑같이 작성했다.

 

말로 설명하는 것보다 코드로 보면 쉬워서 아래 코드를 참고하면 된다. scrollTo도 검색해봤을 때 읽어봤던 놈인데 적용까지 해보지는 않았다ㅠ 적용해볼걸!

// 이미지 슬라이드 왼쪽 버튼의 onClick 이벤트
const prevButton = () => {
  const div = ref.current;

  div?.scrollTo({
    left: div.scrollLeft - 200,
    behavior: 'smooth',
  });
};

// 이미지 슬라이드 오른쪽 버튼의 onClick 이벤트
const nextButton = () => {
  const div = ref.current;

  div?.scrollTo({
    left: div.scrollLeft + 200,
    behavior: 'smooth',
  });
};

 

 

타입스크립트 유틸리티 사용하기

팀원분께서 타입스크립트 문법을 아주 맛깔나게 사용하셔서 나도 다음부터 따라할거다! 유틸리티에 대해서는 조만간 블로깅을 제대로 해두긴 해야겠다. 간단하게 약간의 예제를 들어 설명해보자면 타입스크립트는 공통 타입 변환을 용이하게 하기 위한 유틸리티 타입을 제공하고 있다. 이러한 기능을 사용하면 반복되는 코드를 줄일 수 있다는 장점이 있다. 

// 타입스크립트 유틸리티 사용 전
interface ComponentSlideProps {
  elements: ReactNode[];
  min: number;
  mid: number;
  max: number;
}

interface DynamicHolderProps {
  min: number;
  mid: number;
  max: number;
}

// 타입스크립트 유틸리티 사용 후
interface ComponentSlideProps {
  elements: ReactNode[];
  min: number;
  mid: number;
  max: number;
}

type DynamicHolderProps = Pick<ComponentSlideProps, 'min' | 'mid' | 'max'>;

 

 

728x90

반응형

느낀 점

---

여러 케이스들을 고려하면서 테스팅해볼 수 있어서 좋았다. 이미지 슬라이드를 직접 구현해본 적은 없었던 거 같은데 이번 기회로 직접 구현해보게 되어 슬라이드, 반응형에 대해 직접 공부해볼 수 있어서 좋았다. 

 

 

 

 

 

노력해야할 점

---

조금 더 코드를 어떻게 하면 범용적으로 사용할 수 있을지 생각해봐야겠다. 예를 들어 지금은 이미지 슬라이드로 구현되고 있지만 reactNode로도 구현이 가능하게끔 말이다. 

 

그래서 다음주 우리 팀원들의 목표는 이미지 슬라이드를 조금 더 딥하게 구현해보는 것이다. 

각자의 실력과 해온 결과가 달라서 목표는 조금씩 다른데, 다음주까지 내가 구현해봐야 하는 것은 

1. 컴포넌트 단위로 나누기

2. 데이터는 외부에서 props로 받기

3. 반응형을 하드코딩하지 않고 props로 받아서 적용하기(현재 특정 %로 width를 설정해두었다.)

4. reactNode로도 구현가능하게 끔, Card 형식으로 구현해보기(현재 있는 img + 하단에 text 추가, 이때 text는 optional이다.)

5. flex 쓰지 않고 구현하기(inline, block, inline-block 차이에 대해 공부해보기)

 

다음주도 파이팅이다..!

 

 

 

 

 

참고자료

---

• https://typescript-kr.github.io/pages/utility-types.html

 

 

 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖