[React Slide 구현] React-Slick으로 메인 사이트 구현하기 (슬라이드 크기, 색, 위치 변경까지)

 

여는 글

---

 

자바스크립트로 Slide 구현하려고 알아보던 중 React-Slick 라이브러리를 사용하면 쉽게 구현할 수 있다는 것을 발견해 구현해보았다.

 

라이브러리를 사용하더라도 아직 React 파일 구조를 잘 모르는 나는 어디에 코드를 넣어야할 지 등 꽤 헤맸기 때문에 어느 파일에 코드를 넣어야하는 지, 이를 통해 내가 알게된 파일 구조를 상세히 설명할 예정이다.

 

 

환경설정

---

 

먼저 VSCODE 터미널에서 아래 명령어를 실행한다.

출처 : https://13akstjq.github.io/react/2020/06/28/react-slick-carousel.html

 

npm install react-slick --save

npm install slick-carousel

 

그리고 슬라이드와 관련된 CSS 파일을 import 시켜줘야 하는데 그 전에, React-Slick 설치를 성공했다면 파일 구조를 살펴보자.

 

VSCODE의 파일 구조를 보면 우리가 사용했던 src(App.css, App.js 가 있는 곳)와 그 위에 public,  node_modules 라는 폴더가 보인다. 

 

node_modules 안에 방금 설치했던 React-Slick 라이브러리가 설치되고 node_modules 아래에 slick-carousel 이라는 폴더를 클릭해보면 slick > slick.css, slick-theme.css 라는 파일이 보인다. 

 

이 파일 두 개를 일단 복사해준다. (필수는 아니지만 추후 매우 편리함)

출처 : https://sirong.tistory.com/38

 

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

 

위 코드에 보이는 것처럼 원래 import 시켜야 할 CSS 파일 경로다.

 

앞으로 이 CSS 코드를 수정할 경우가 잦은 데, 파일을 복사해 src에 넣고 import 경로를 아래와 같이 해주면 바로바로 사용할 수 있어 편리하다.

 

index.js

import "./slick.css";
import "./slick-theme.css";

 

 

React-Slick (슬라이드) 구현

---

 

이제 본격적으로 슬라이드 구현을 시작한다.

 

먼저 React-Slick은 샘플 코드가 아주 잘 되어 있다. 이 코드를 그대로 가져와 사용한다.

출처 : https://react-slick.neostack.com/

 

import React, { Component } from "react";
import Slider from "react-slick";

export default class SimpleSlider extends Component {
  render() {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <div>
        <h2> Single Item</h2>
        <Slider {...settings}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
          <div>
            <h3>6</h3>
          </div>
        </Slider>
      </div>
    );
  }
}

 

나는 이 코드를 도대체 어느 파일에 넣어야 하는 지 한참 헤맸는 데 구글링으로도 샘플 코드만 나와있지 어디에 넣으라는 말이 없어서 그냥 눈치껏 App.js에 넣었다. (사실 아직도 여기가 맞는 건지 모르겠다. 그래도 동작하긴 한다)

 

그러면 원래 있던 fuction App()은 어떻게 할 지(안그래도 App 함수때문에 여기 넣어도 되나 고민했다)  생각하다가 혹시 모르니 일단 전체 주석처리 해버렸다.

 

이렇게 App 함수를 주석처리 해버렸으니 코드를 수정해야 하는 부분이 약간 있다.

 

index.js

ReactDOM.render(
  <React.StrictMode>
    <SimpleSlider />  /*수정된 부분*/
  </React.StrictMode>,
  document.getElementById('root')
);

 

원래는 <SimpleSlider />가 <App /> 였다.

 

여기서 눈치 챌 수 있겠지만 SimpleSlider는 샘플코드의 Class 이름이다.

 

원래도 함수명(App)을 적어놨길래 바꿔야 될 것 같아서 바꿔줬는데 아마 바꿔주는 게 맞는 것 같다.

 

이제 npm start를 터미널에 입력해주면 좁은 슬라이드가 생길텐데 배경색, 슬라이드 크기를 지금부터 조정 할 것이다.

 

 

React-Slick 구현 후 웹 페이지 배경색

---

 

아마 슬라이드가 구현되면서 웹페이지 배경색이 날아갔을 것이다.

 

배경색 구현은 기존 코드를 재활용했다. 초기에 제공해주는 App.css 파일에는 .App 부분이 있다.

 

function App() 코드를 자세히 봤다면 알겠지만 아래처럼 function App()에 원래 있던 코드다.

function App() {
  return (
    <div className="App">  /* 여기 */
      <header className="App-header"> 
      </header>
    </div>
  );
}

export default App;

 

이 App은 App.css 파일에 있고 App.css를 사용하는 App.js는 맨 첫 줄에

import './App.css';

 

이렇게 App.css를 사용하겠다고 명시해놓았다.

 

이 구조는 간단하지만 기억해두는 것이 좋다. 슬라이드 CSS도 이와 같은 방식으로 사용한다.

 

그럼 이제 App.css로 가서 .App를 통해 웹페이지 배경색을 지정해보자.

 

App.css

.App {
  text-align: center;
  background-color: #c1d3f4;
  min-height:100vh;

}

 

컬러 코드는 원하는 코드로 사용하면 된다. 생각보다 코드가 짧은데 많은 시행착오를 거쳤다.

 

처음에는 min-height를 지정하는 이유를 몰라서 지웠더니 배경색이 웹페이지 일부만 채워지는 문제가 발생했다.

 

저 코드를 사용하고나서는 아래쪽까지 색이 잘 채워졌다.

 

웹 수업을 들었을 때 교수님이 모니터 크기마다 보이는 넓이가 다르니 절대, 상수로 크기를 지정하지 말라고 말씀하신 게 생각나서 조금 찝찝했는데 구글링 해보니 vh는 상수가 아니라 화면을 채우는 데 많이 사용되는 단위였다.

 

이제 .App을 App.js에 적용시키면 된다.

 

App.js

/* . . . 생략 . . . */

return (
      <div className="App"> /* 추가된 부분 */
        <div>
          <t1>여기는 네비게이션바 자리</t1>
        </div>
      <div>
        <Slider {...settings}>
          <div>
        	<h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
          <div>
            <h3>5</h3>
          </div>
        </Slider>
      </div>
</div> /* 추가된 부분 */
    );
  }
}

 

이렇게 전체적으로 감싸듯이 넣어주면 배경색이 잘 출력된다.

 

++혹시 이렇게 했을 때 위쪽이나 오른쪽에 좁은 흰 여백이 보인다면 그건 <h#> 태그 때문이니 지우면 해결된다. 

 

 

슬라이드 배경색 및 위치

---

 

슬라이드 배경색은 slick.css에서 설정한다. slick.css에 .slick-slider에서 작성하면 된다.

 

slick.css

.slick-slider /*슬라이드 틀 조정*/
{
    position:relative;
    background: #fffff4;
    display:inline-block;
    width: 1000px;
    height: 500px;
    align-items: center;
    justify-content: center;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

 

저 코드에서 positon, display, align-items, justify-content만 살펴보면 positon 속성은 크게보면 고정인지 아닌지로 나뉘는 것 같았다.

 

구글링하다보니 별로 추천하지는 않는 방법이지만 positon 속성 중에 absolute 속성이 있다.

 

그럼에도 저 속성을 잠깐 사용했었는데 absolute를 지정해놓고 left, top 등에 숫자를 줘서 숫자 준 만큼 밀어낼 수 있고(여백 크기 지정), 이 방식으로 가운데 정렬을 시킬 수 있다고 해서 잠깐 쓴 적이 있었다.

 

그러나 슬라이드의 width나 height가 바뀔 때마다 수치를 다시 재조정해야했고 정확한 가운데 정렬이 아니다보니 왼쪽 오른쪽 공백 크기도 그때그때 달라서 포기했다.

 

display의 inline-block은 inline, 말그대로 내용(텍스트 등)에 영향을 받아 align-items, justify-content 등이 center면 텍스트를 감싸고 있는 block 또한 가운데 정렬이 된다고 한다.

 

그러다가 저 코드로 display, align-items, justify-content를 사용해서 정확한 가운데는 아니고, 웹 페이지 상단에서 가운데 정렬까지 성공했다.

 

완전히 가운데 정렬을 시킬까하다가 상단에 네비게이션바를 만들 예정이라 <t1> 태그를 사용해서 표시했더니 슬라이드가 그 공간만큼 아래로 밀려났다.

 

그래서 굳이 완전 가운데 정렬로 만들지 말고 위에 네비게이션 바가 생기면 자연스럽게 밑으로 밀려날 것 같아서 더 이상 위치에는 손대지 않았다.

 

 

닫는 글

---

 

그렇게 해서 완성된 아래 페이지.

 

 

글이랑 사진 넣는 것은 다음 포스팅에서 설명

 

 

모든 코드(GitHub)와 포트폴리오 주소

웹 애플리케이션 포트폴리오(Full Stack)