Swiper 라이브러리를 사용하여 데이터 통신이 되는 CarouselSlider 기능 구현_useLayoutEffect 사용

Issue

https://swiperjs.com/react

Swiper React Components

현재 프로젝트에선 사용자에게 팔로우할 만한 친구를 상단 바에서 보여주는 기능을 제공한다.

 

이때 친구 리스트를 한 번에 모두 보여주는 것이 아니라 초기에 8명의 Friend Figure만 보여주고 사용자가 버튼을 클릭하였을 경우에 한해서, 8개의 배수로 유동적으로 증가하는 offset을 query값으로 설정하여 서버에 API 통신을 한다.

 

Carousel Slider 기능은 지금까지 여타 다른 프로젝트에서 어떠한 라이브러리 없이 하드 코딩한 경험이 많았었기 때문에 이번에는 Carousel Slider 기능을 구현할 때 대표적으로 많이 쓰이는 Swiper 라이브러리를 사용해 보기로 하였다.

 

Swiper React 라이브러리를 다운로드하고 사전 설정하는 방법은 인터넷에 이미 많기 때문에 이를 생략하고 해당 프로젝트에서 스스로 고민하며 마이그레이션 한 코드를 중적적으로 기록해보고자 한다.

 

Code

우선 슬라이더 기능만 담당하고 있는 CarouselSlider 컴포넌트를 별도로 생성하여 Presentation Component 간에 관심사의 분리를 성립시켜 주었다.

 

현재 프로젝트에서 친구 리스트를 보여주는 기능 동작이 원활하게 되기 위해선 Swiper 라이브러리가 제공하는 Swiper Component를 그대로 사용하면 안된다.

 

우선, 현재 프로젝트에서의 친구 리스트는 끝이 존재하지 않는다. 즉, DB에 저장된 친구 리스트들을 offset값으로 매번 next 버튼을 클릭할 때마다 API을 통신하여 가져와서 기존 리스트 배열에 이어서 저장해줘야 한다.

 

이벤트가 발생하였을 때 이렇듯 추가적인 기능 동작을 하기 위해서는 별도의 swiper 변수를 자신의 컴포넌트 내에 state 값으로 설정해주고 해당 변수를 Swiper 컴포넌트 내 props로 넘겨 swiper를 인스턴스 형식으로 사용할 수 있도록 설정해야 한다.

 

아래와 같이 useState의 setSwiper 함수 객체를 useRef를 사용하여 노드 객체를 참조할 때처럼 설정해 줌으로써, Swiper 컴포넌트에 종속되지 않고 swiper 인스턴스의 메서드들을 사용하여 원하는 동작이 일어나도록 커스터 마이징해주었다.

	( ... )

const [swiper, setSwiper] = useState(null);


	( ... )

return (
    <StyledSwiper ref={setSwiper}>
      {children}
    </StyledSwiper>
  );

위의 설정만으론 원활한 동작이 되지 않는다. Swiper 인스턴스를 담당해 줄 객체를 바인딩시켜주었다면, 이제는 이를 실제 설정 값 객체에 정보로 바인딩해주어 마찬가지로 props로 넘겨주어야 한다.해당 프로젝트에선 Carousel Slider의 기본 디자인을 차용하지 않고 디자이너 분이 주신 시안대로 스타일 커스터 마이징해야 되기 때문에 버튼 요소 또한 다음과 같이 내가 설정한 값으로 랜더링되도록 코드를 작성하였다.

	( ... )

const navigationPrevRef = useRef(null);
const navigationNextRef = useRef(null);

	( ... )

const swiperParams = {
    navigation: {
      prevEl: navigationPrevRef.current,
      nextEl: navigationNextRef.current,
    },
    onBeforeInit: swiper => {
      swiper.params.navigation.prevEl = navigationPrevRef.current;
      swiper.params.navigation.nextEl = navigationNextRef.current;
      swiper.navigation.update();
    },
    slidesPerView: 1,
    onSwiper: setSwiper,
  };

이제 next 버튼을 클릭했을 경우에 서버에서 새로운 친구 리스트를 가져와야 하기 때문에 다음과 같이 react-redux useDispatch와 friends Module에서 offset값을 증가시켜 주는 increaseFriendOffset과 친구 리스트를 서버에서 가져 오는 friendList 두 액션 생성 함수를 import하여 이벤트 콜백 함수에서 trigger 시켜 주었다.

 

이때 추가적으로 조건 처리를 해주었는데, 만약에 next 버튼을 눌러 API 통신을 함과 동시에 다음 슬라이드로 넘어가고 다시 뒤로 돌아갈 경우에는 별도의 API 통신을 하지 않고 전에 서버를 통해 가져 온 데이터 리스트를 그대로 재사용하면 되기 때문에 Click 이벤트가 일어나더라도 해당 버튼 prev 버튼일 경우에는 리턴되도록 해주었다.

 

또한 이전 슬라이드로 돌아갔다가 다시 다음 슬라이드로 이동하였고 해당 이동된 슬라이드가 마지막 슬라이드일 경우에는 swiper.isEnd 프로퍼티를 사용하여 마지막 슬라이드인지 식별하고 맞다면 isPrev 식별 변수를 false로 바꿔주었다.

const nextSlide = () => {
    if (isPrev) {
      if (swiper.isEnd) isPrev = false;
      return;
    }

    batch(() => {
      dispatch(increaseFriendsOffset("recommendFriendList"));
      dispatch(friendList());
    });
  };

 

useLayoutEffect를 통해 슬라이드 이동

버튼을 클릭하고 API 통신을 완료하여 그 다음 친구 리스트 데이터를 가져와 리덕스 스토어에 적재하는 것까진 성공하였지만 해당 값을 useEffect 내에서 처리하다 보니 제대로 동작이 되지 않는 문제가 발생하였다.

 

현재 CarouselSlider 컴포넌트의 자식 컴포넌트는 친구 리스트를 담고 있는 배열을 통해 map 메서드를 사용하고 있으며, 그렇게 완성 된  JSX는 children 객체 형태로 넘겨준다.

 

그리고 해당 children 객체를 useEffect 내에 의존성 배열에 할당해 주어 해당 값이 바뀔 경우에 슬라이더가 실제 화면 상에서 뒤에 이어 붙어짐과 동시에 다음으로 넘어갈 수 있도록 의도한 것이었는데, 기능이 제대로 동작되지 않았다.

	    ( ... )

return (
    <Container>
      <Name>맞춤친구 추천</Name>
      <CarouselSlider>
        {completeContents[0].map((friendList, index) => {
          return (
            <SwiperSlide key={index}>
              <FriendList>
                {friendList.map(
                  ({ id, nickname, image_url, follows }, index) => {
                    return (
                      <FriendFigure
                        key={index}
                        nickname={nickname}
                        image_url={image_url}
                        follows={follows}
                      />
                    );
                  }
                )}
              </FriendList>
            </SwiperSlide>
          );
        })}
      </CarouselSlider>
    </Container>
  );

원인을 곰곰히 생각해보니 useEffect와 같은 경우에는 Rendering과 Paint가 모두 일어난 뒤에 비동기적으로 발생하기 때문에 새롭게 추가 된 슬라이더가 안정적으로 연결되지 않고 이로 인해 다음 슬라이드로 Switching되지도 않았던 것이다.

 

이에 다른 방법을 찾아보니 useLayoutEffect 라는 Hooks를 찾을 수 있었다.

https://ko.reactjs.org/docs/hooks-reference.html#uselayouteffect

Hooks API Reference – React

The signature is identical to useEffect, but it fires synchronously after all DOM mutations. Use this to read layout from the DOM and synchronously re-render. Updates scheduled inside useLayoutEffect will be flushed synchronously, before the browser has a chance to paint.

즉, 화면에 최종적으로 보여지기 전에 DOM 트리가 구성되고 해당 DOM 트리의 레이아웃을 참조하여 동기적으로 리랜더링이 필요한 경우에 쓸 수 있는 Hooks 였다.

 

이에 다음과 같이 children에 해당하는 친구 리스트 레이아웃이 모두 랜더링된 이후에 다음 슬라이드가 넘어가지도록 코드를 작성하였고 기능 동작에 성공하였다.

useLayoutEffect(() => {
    if (swiper) swiper.slideNext();
  }, [children]);

 

동작 영상