react-scroll-horizontal

• 가로 스크롤을 가능하게 해주는 짱 멋진 모듈을 발견했다.
  <div>로 이루어진 각각의 요소들을 일렬로 나열해서 마우스 휠을 움직이면 좌우로 스크롤이 가능하다. 데모 영상에서 볼 수 있듯이 풀 스크린도 가능하고, width 조절을 통해 폭을 조절할 수도 있다.
  
  

1. 사용 계기

• 웹페이지 개발 과정에서 디자이너 친구가 요즘은 풀 스크린이 유행이라는 새로운 사실을 알려주었다. 그래서 현재 모든 페이지들을 전체 화면 크기는 고정시켜두고, 가로로 스크롤하는 형식으로 만들어 나가고 있다. 그 중 첫 번째 도전이 랜딩페이지의 동영상들을 가로 스크롤을 통해 로드할 수 있도록 하는 것이었다. 구글링해본 결과 'react-scroll-horizontal' 모듈이 우리가 원하는 방식과 정확히 일치해서 사용하게 되었다. (。・∀・)ノ
  
  

2. 사용 방법

• 설치

    npm i react-scroll-horizontal

• 적용

    import ScrollHorizontal from 'react-scroll-horizontal';

    <div id='scroll-horizontal' style={{ height: `45em` }}>
        <ScrollHorizontal>
           {renderCards}
        </ScrollHorizontal>
    </div>

대략 위와 같은 방법으로 사용 가능하다.

중요한 부분은 {renderCards} 부분인데, renderCards의 자료형은 배열이며, 각각의 요소들은 <div> 태그로 감싸져 있는 형태이다. 즉 import 해 온 모듈 사이에 화면에 나타내고 싶은 요소들을 <div> 형태로 원하는 만큼 넣어주면 된다!

3. 에러 사항

1) 가져온 요소들의 크기가 불규칙하게 나타남

→ 요소들의 <div> 태그에 CSS width 속성을 px 단위로 고정해주는 방법을 통해 해결했다. % 단위가 아니기 때문에 화면이 작아졌을 때도 크기가 그대로라는 단점이 있지만 일단은 PC 버전이 제일 우선 순위이기 때문에 이렇게 적용했다. 반응형은 나중에 미디어 쿼리를 적용해봐야 할 것 같다.

2) 요소들을 두 줄로 로드하고 싶음

화면설계서상, 2XN 형태로 영상들을 로드해야했다. 대부분의 웹페이지는 세로 스크롤이다 보니, column의 개수를 고정하는 것은 어렵지 않았는데, row의 개수를 고정하는 것이 꽤 어려웠다.

→ 개발 팀원이 답을 찾아주었는데, 아래와 같이 CSS 속성을 설정해주는 방법으로 해결했다.

#scroll-horizontal .scroll-horizontal > div {
  display: grid !important;
  grid-template-rows : auto auto;
  grid-auto-flow: column;
}

우선 그리드 형태로 나타내주었다. 이때 !important 값을 넣어준 이유는 모듈 내부 파일의 display 속성과 충돌할 때, 현재 코드의 값을 더 우선적으로 적용하기 위해서이다. 현재 CSS 선택자가 모듈 내부 파일의 태그를 선택하고 있어서 display 속성이 서로 충돌하는 상태였다.

다음으로 grid-template-rows 속성으로 행의 개수를 설정해주었다. auto값은 행의 사이즈를 자동으로 지정해준다. 또한 auto가 두 개이므로 요소가 두 줄로 나타나게 된다! 예를 들어 세 줄로 나타내고 싶으면 grid-template-rows : auto auto auto; 라고 해주면 된다.

grid-auto-flow: column; 부분은 각 열을 차례로 채워가며 배치해주는 속성이라고 한다.

4. 결과물

대략 이런 프레임으로 만들어주었다. 😊

---

References

https://www.npmjs.com/package/react-scroll-horizontal
https://github.com/hew/react-scroll-horizontal