[리액트+TS] vs [HTML+JS] 에서 외부 라이브러리/모듈 사용비교

### UI화면 이미지 슬라이드를 외부 모듈/라이브러리로 이용해 본다.

 - 참고로, 니보슬라이더와 같은 여러 기능이 묶여진 모듈을 번들 모듈이라고 한다.

---------------------------------------------------------------------------------------------------------------

1. 리액트+TS 에서 react-nivo-slider(니보슬라이드)라는 라이브러리를 가져와서 구현해 본다.

 - 스택비즈의 리액트TS 에서 실습 : https://stackblitz.com/?starters=frontend

---------------------------------------------------------------------------------------------------------------

- 반드시 아래 실행화면의 노란색 처럼 react-nivo-slider 를 설치하고, 소스에서 import 하고 코딩을 시작 한다.(아래)

- 위 스택비즈에서 코딩한 내용(아래) : Swiper 컴포넌트에 옵션을 주는 코딩은 다음시간에...

import { FC } from 'react';

import './style.css';
import { Image, Link, Swiper } from 'react-nivo-slider'; // 외부에서 번들된 모듈 추가
import 'react-nivo-slider/es/style'; // 외부 CSS 추가
import 'react-nivo-slider/es/style/default'; //외부 CSS 추가

export const App: FC<{ name: string }> = ({ name }) => {
  return (
    <div>
      <h1>Hello {name}!</h1>
      <p>Start editing to see some magic happen :)</p>
      {/* 여기서 부터 추가한 부분 */}
      <Swiper>
        <Image
          src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/toystory.jpg"
          title="토이스토리"
        />
        <Link href="#">
          <Image
            src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/up.jpg"
            title="업"
          />
        </Link>
        <Image
          src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/walle.jpg"
          title="왈리"
        />
        <Image
          src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/nemo.jpg"
          title="니모"
        />
      </Swiper>
    </div>
  );
};

---------------------------------------------------------------------------------------------------------------

2. HTML+JS 에서 jQuery 로 니보슬라이드라는 라이브러리를 가져와서 구현해 본다.

 - 코드펜 에서 실습 : https://codepen.io/

---------------------------------------------------------------------------------------------------------------

- 반드시 코드펜 작업 화면의 셋팅창에서 CSS 2개와 JS 와부 라이브러리/모듈 2개를 import 해야 한다.(아래)

<link rel="stylesheet" href="아래 경로/파일이름">
<style type="text/css">
   @import url("아래 경로/파일이름");
</style>
/*  위에 2가지 방식 중 편리한 대로 css 경로/파일이름을 삽입한다. 
단, 코드펜에서는 아래 화면실행화면 Settings 메뉴에서 작업한다. */

https://www.jqueryscript.net/demo/nivo-slider/themes/default/default.css
https://www.jqueryscript.net/demo/nivo-slider/nivo-slider.css

/*
<script src="아래 외부jQuery모듈경로/파일명"></script>
*/
// 위 JS 모듈 경로/파일명에 아래 내용을 입력한다. 단, 코드펜에서는 Settings 화면에서 작업한다.
https://code.jquery.com/jquery-2.2.4.min.js
https://www.jqueryscript.net/demo/nivo-slider/jquery.nivo.slider.js

- 아래 코드펜에서  실행화면 과 노란색 표시 부분 참고

- HTML 소스 (아래)

<div id="wrapper">
  <div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">
      <img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/toystory.jpg" alt="" title="토이스토리" />
      <a href="#">
        <img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/up.jpg" alt="" title="업" />
      </a>
      <img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/walle.jpg" title="왈리" />
      <img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/nemo.jpg" alt="" title="니모" />
    </div>
  </div>
</div>

- JS 소스 (아래)

 $(window).load(function() {
  $('#slider').nivoSlider({
    effect: 'slideInLeft', // 화면 전환 효과: 'slideInLeft,fold,fade'
    animSpeed: 500, // 이미지 전환 속도
    pauseTime: 4000, // 이미지 보이는 시간
    startSlide: 0, // 시작 이미지 번호 (인덱스 0부터)
    directionNav: true, // 좌우 전환 화살표 사용
    controlNav: true, // 1,2,3... 하단 네비-navigation 사용
    pauseOnHover: true, // 이미지 위에 마우스 오버시 멈춤 사용
  });
});

 

Ps1. 참고로, 실제 화면 에서 니보 슬라이드를 구현한 URL 이다. :  아래 화면의 소스보기로 내용을 확인해 본다.(아래)

http://edu19.dothome.co.kr/metro/sub.php/CATEGORY/2/MENU_CODE/001001003

 

Ps2. 리액트+TS 에서 외부 모듈 사용에 대해서 더 자세한 사항은 아래에서 확인

- 리액트+TS 에서 챠트 사용 : https://stackblitz.com/edit/react-ts-nivo-riuash?file=Hello.tsx

- 리액트+TS 에서 컨트롤 슬라이더 사용 : https://codesandbox.io/s/rc-slider-react-typescript-foh41?file=/src/App.tsx