WETCHAPEDIA 팀 프로젝트 회고(2)_기능 구현

Carousel Slide

기능 구현

 

Carousel Slide는 이번 WETCHAPEDIA 프로젝트에서 내가 맡은 핵심 기능이자 가장 고민했던 부분이다.

 

단순히 기능이 원활하게 동작되는 것 뿐만 아니라 해당 컴포넌트를 얼마나 효율적으로 만드는 것인가에 대해서 끊임 없이 고민하였기에 이에 대해서 포스팅해보고자 한다.

 

처음에 Carousel Slide 기능을 구현하기 위해서 일정 영역을 Fixed View로 지정해 둔 뒤 overflow value를 hidden으로 하여, 버튼 요소를 누르게 되면 해당 View의 너비만큼 transformX 값을 퍼센트(%) 단위로 이동하게끔 하였다.

 

그리고 Carousel Container 내에 마우스가 hover가 되면 overflow value를 scroll로 바꾸어, 사용자가 일반 가로 스크롤으로도 다양한 UI를 확인할 수 있도록 기능을 구현하였다.

 

하지만 overflow의 value 값을 이렇게 유동적으로 바꾸다 보니, 이전의 Feeds 정보를 가져오지 못 하는 문제가 발생하였다.

 

넘쳐나는 요소를 숨김 처리로 했었던 Container 내에선 Slide Bar를 X축으로 끌어 당김으로써, 숨겨져 있던 나머지 요소들을 볼 수 있었던 것인데, 일반 스크롤 영역으로 바뀌게 되면서 스크롤 시작 지점 이전의 요소는 확인할 수 없게 된 것이다.

 

이에 이러한 현상을 어떻게 해결할 것인지 고민하다가 useRef()를 사용하기로 하였다.

useRef()는 querySelector()나 getElementById()와 같이 DOM에 특정 요소에 접근한다.

 

useRef()의 이러한 특성을 이용하기 위해서, Carousel Container 내에서 요소를 담을 Slide Bar 담당의 요소에 기본 overflow value를 scroll로 값을 설정해준 뒤 ref를 지정해 두었다.

 <div ref={ref => (this.carouselSildeRef = ref)} />

 

그리고 버튼 요소를 클릭하거나 이벤트 발생 시, moveToX() 라는 콜백 함수가 동작되도록 하였다.

 

moveToX는 event.type 값에 따라 다르게 동작한다.

클릭 이벤트일 경우에는 해당 영역의 View 너비만큼 ScrollLeft 값을 할당하여 동적으로 이동하는 것처럼 사용자에게 보여지게끔 기능을 구현하였다.

if (eventType === 'click') {
      let { curTranslatePosX } = this.state;
      let { name } = getTarget(event.target, 'carouselControl');

      if (name === 'right') {
        this.carouselSildeRef.scrollLeft = curTranslatePosX + slideMove;
        this.setState({
          curTranslatePosX: curTranslatePosX + slideMove,
        });
      } else {
        this.carouselSildeRef.scrollLeft = curTranslatePosX - slideMove;
        this.setState({
          curTranslatePosX: curTranslatePosX - slideMove,
        });
      }
    }

 

transform으로 Slide Bar를 움직여 줬던 것과는 다르게(transform은 실제 보여지는 것과 다르게 layout엔 변함이 없기 때문에 이전 값을 참조할 필요없이 100% => 200% => 300% ... 식으로 동작한다) 이전의 값을 참조한 뒤 해당 값에 가산한 값만큼 스크롤이 움직여야 정상적으로 슬라이딩 기능이 동작되기 때문에 Component 내 state 값으로 지속적으로 스크롤 된 길이를 적재 및 관리해주었다.

 

 그리고 만약에 event.type이 Click이 아닌 Scroll일 경우에는 별도의 이동 연산은 하지 않고 이후 클릭 이벤트 시 슬라이드 바의 정확한 이동을 위해서 스크롤 된 양만을 앞선 state 값에 저장해 주는 로직만을 작성하였다.

else {
      let curScrollLeftPos = event.target.scrollLeft;
      this.setState({ curTranslatePosX: curScrollLeftPos });
    }

 

 

기능 자체는 조금만 고민을 해본다면 그리 어려운 사항은 아니었지만, 기능 자체적인 것보다 나를 더 고민하게 했던 것은 해당 컴포넌트를 독립적인 하나의 모듈로서 작동하게끔 다른 컴포넌트와의 관계를 설정하고 내부 로직을 최대한 범용성 있게 동작하도록 작성하는 일이었다.

 

즉, Carousel Slide Component를 Common Component로서 사용될 수 있도록 목표하였고 이를 위해 다음과 같은 사항을 로직에 반영하였다.

 

첫 번째, Carousel Slide Bar에 들어가는 Feeds(영화 관련 정보들)들을 Mapping하여 하나의 순회 가능한 리스트 자료 구조인 배열로 만들어 준 뒤, 이를 CarouselSlide Components 내 ul 요소로 style 값을 지정한 Container 내에 바인딩 시켰다.

 

이런 식으로 Component 내부에 있는 리스트 값을 children 값으로 유동적으로 할당 받음으로써, 해당 컴포넌트의 확장성을 증대시켰다.

	<div
          ref={ref => (this.carouselSildeRef = ref)}
          className="feedsCarousel"
          onScroll={this.moveToX}
          style={{ width: { slideWidth } }}
        >
          <ul className="carouselSlider">{children}</ul> //children은 Mapping된 하나의 리스트이다.
          
	( ... )

 

그 다음으론 CarouselSlide Component 내에 Fixed 된 View의 값을 화면 크기에 따라 유동적으로 바꿔주기 위하여 slideWidth와 slideMove 두 개의 props를 설정해주어 다른 page 내에서 가변 된 화면에도 해당 Carousel Bar의 사이즈와 움직이는 정도가 비율대로맞춰지도록 로직을 작성하였다.

<CarouselSlide slideWidth={1320} slideMove={1327}>
                <MovieList type={feedsType} movieListData={movies} />
              </CarouselSlide>
 // slideWidth는 실제 View 크기, slideMove는 실제 스크롤이 움직여야 될 움직임(margin 및 padding 값이 포함되어 있기 때문에 실제 View보다 조금 더 움직이도록 조정)의 정도이다.

 

 

마무리

이번 프로젝트를 통해 CarouselSlide Component를 만들어보면서, 리액트 라는 라이브러리를 왜 사용하는가에 대해서 다시 한번 생각하게 되었다.

 

프로그램은 단순히 input과 output만 제대로 나오기만 하는 단순 연산 장치가 아니다.

 

프로그램은 내에서는 수 많은 기능들이 얽혀 다양한 작업들이 수행된다. 그 속에서 공통된 집합의 연산을 통해 동일한 연산 과정을 단순화시킬 수 있는 것인가에 대해서 끊임 없이 생각해야 한다는 생각이 들었다.

 

지금은 아주 작은 프로젝트이지만 향후 현업에 나가서 규모가 있는 프로젝트에 참가할 때 한 개인으로서 내가 이러한 대규모의 작업장에서 공헌할 수 있는 것은 거대하고 대단한 일이 아닌, 다양한 프로세스들에 접목시킬 수 있는 하나의 작은 모듈을 만들어서 거시적으로 프로젝트의 효율성 증대시킬 수 있도록 하는 것이 아닐까 라는 생각이 들었다.

 

이번 CarouselSlide Component를 만들고 분립시켜 봄으로써 이러한 점들을 깨달을 수 있었다.

 

관련 포스팅

https://choi95.tistory.com/175

Carousel Slide 기능 Component로 분립

https://choi95.tistory.com/176

Type 값에 따라 조건부 랜더링_getDerivedStateFromProps