[react/typescript] Swiper ์‚ฌ์šฉ๊ธฐ

2023. 10. 29. 19:53ยท ๊ฐœ๋ฐœ/React
728x90
๋ฐ˜์‘ํ˜•

๋งจ๋‚  ์ •ํ•ด์ ธ์žˆ๋Š” ํ…œํ”Œ๋ฆฟ์„ ์ด์šฉํ•œ ๊ธฐ๋Šฅ ๊ฐœ๋ฐœ๋งŒํ•˜๋‹ค๊ฐ€ ๋ชจ์ฒ˜๋Ÿผ ์ƒˆ๋กœ์šด UI๋ฅผ ์งœ์•ผํ•˜๋Š” ์ผ์ด ์ƒ๊ฒผ๋‹ค. 

๋ฐ‘๋ฐฅ์„ ๊น”์•„๋ณด์ž๋ฉด ใ…‹ใ…‹... ์ฒ˜์Œ๋ถ€ํ„ฐ ๋นŒ๋“œํ•œ ํ”„๋กœ์ ํŠธ๊ฐ€ ์•„๋‹ˆ๋ผ ์ค‘๊ฐ„์— ๋ผ์—ฌ๋“  ํ”„๋กœ์ ํŠธ์˜€๊ธฐ์— ์ฝ”๋“œ๋ฅผ ์ฝ์„ ๋•Œ๋ถ€ํ„ฐ ๋ฒ„๋ฒ…์ด๊ธด ํ–ˆ๋‹ค. 

์ž ์ด์ œ ๋ฐ‘๋ฐฅ์€ ๊น”๋ฆผ.

 

๋‚ด๊ฐ€ ํ•ด์•ผํ•  ๋ชฉ๋ก

1. swiper ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์“ด๋‹ค.

2. navigator ๋ฒ„ํŠผ์„ ๋‚˜์˜ค๊ฒŒํ•˜๊ณ  ์ฒซ ์Šฌ๋ผ์ด๋“œ์—์„œ๋Š” ์™ผ์ชฝ ๋ฒ„ํŠผ์ด ์‚ฌ๋ผ์ง€๊ฒŒ ๋งˆ์ง€๋ง‰ ์Šฌ๋ผ์ด๋“œ๋Š” ์˜ค๋ฅธ์ชฝ ๋ฒ„ํŠผ์ด ์‚ฌ๋ผ์ง€๊ฒŒํ•œ๋‹ค.

3. ์Šฌ๋ผ์ด๋“œ๋Š” ๋งˆ์šฐ์Šค ๋“œ๋ž˜๊ทธ๋กœ๋„ ๊ฐ€๋Šฅํ•˜๊ฒŒํ•œ๋‹ค.

 

 

 

 

 

Code

import React, { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';


const Projects = () => {
  const [swipe, setSwipe] = useState<any>();

  const [lastBtn, setLastBtn] = useState<boolean>(false);
  const [firstBtn, setFirstBtn] = useState<boolean>(true);
  
  return (
    <>
        <button onClick={() => swipe?.slidePrev()}>backward</button>
        <Swiper
          onBeforeInit={(swipper) => setSwipe(swipper)}
          
          // ๋ฒ„ํŠผ display๋ฅผ ์œ„ํ•œ ๋ถ€๋ถ„
           onSlideChange={e => {
            e.isEnd ? setLastBtn(true) : setLastBtn(false);
            e.isBeginning ? setFirstBtn(true) : setFirstBtn(false);
          }}
        >
          {projects?.map((value: IProjectCard) => {
            return (
              <SwiperSlide key={uuidv4()}>
                <ProjectCard
                  key={uuidv4()}
                  header={value.header}
                />
              </SwiperSlide>
            );
          })}
        </Swiper>
        <button onClick={() => swipe?.slideNext()}>forward</button>
    </>
  );
};

 

์œ„์˜ ์ฝ”๋“œ์—์„œ๋Š” ์ƒ๋žต๋˜์—ˆ๋Š”๋ฐ  lastBtn, firstBtn์„ ์ด์šฉํ•ด์„œ button style์— display๋ฅผ ์ฃผ๋ฉด ๋œ๋‹ต๋‹ˆ๋‹ค! 

 

useRef๋ฅผ ์จ์„œ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค๊ณ ํ–ˆ๋Š”๋ฐ, typescript๋ฅผ ์“ฐ๋ฉด ํƒ€์ž…์— ๋Œ€ํ•œ ์—๋Ÿฌ๊ฐ€ ๊ณ„์† ๋‚˜์„œ ์‚ฌ์šฉํ•˜์ง€ ๋ชป ํ•จ. 

๊ทธ๋ž˜์„œ ์ฐพ์•„๋‚ธ๊ฒŒ useState๋ฅผ ์“ฐ๋Š” ๊ฒƒ์ด์˜€๋‹ค, ๊ทธ๋Ÿฐ๋ฐ ์—ฌ์ „ํžˆ ์ดํ•ด๊ฐ€ ํž˜๋“ค๋‹ค. ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์“ฐ๋ฉด 100% ์ดํ•ด ํ•  ํ•„์š”์—†์ด ๊ทธ๋ƒฅ ๋ฐฉ๋ฒ•์ ์ธ ๋ถ€๋ถ„๋งŒ ๋”ฐ๋ผ๊ฐ€๋ฉด ๋˜๋Š” ๊ฑด๊ฐ€ ์‹ถ์€๋ฐ, ๋‹ต๋‹ตํ•˜๋‹ค. setSwipe๋ฅผ ์ดํ•ดํ•˜๊ณ  ์‹ถ์–ด์„œ ์ฝ”๋“œ๋ฅผ ๋‹ค ๊นŒ๋ณด๊ณ  ์‹ถ์€ ๋งˆ์Œ ๋ฐ˜, ๋ณต์žกํ•จ์— ๋„ฃ์–ด๋‘๊ณ  ์‹ถ์€ ๋งˆ์Œ ๋ฐ˜. ใ…‹ใ…‹ใ…‹ใ…‹ใ…‹ ... ใ…Ž... ๊ทธ๋ž˜๋„ ์ž‘๋™ํ•œ๋‹ค๋Š” ๊ฒƒ์— ๊ฐ์†จ

 

 

 

 

 

์˜ค๋žœ๋งŒ์— ์ƒˆ๋กœ์šด ๊ฒƒ์„ ๋„์ž…ํ•˜๋Š”๊ฑฐ๋ผ์„œ ์Šค์Šค๋กœ๊ฐ€ ๋ฐ”๋ณด๊ฐ€ ๋œ๊ฑด๊ฐ€? ํ•˜๋Š” ์ƒ๊ฐ๋„ ๋งŽ์ด ๋“ค์—ˆ๋‹ค. ์ด๋ž˜์„œ ๋˜๋Š”๊ฑธ๊ฐ€? ๋ผ๋ฉฐ... ใ…Ž...

 

 

 

 

 

728x90

'๊ฐœ๋ฐœ > React' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Redux] Redux toolkit ๊ธฐ์ดˆ ์ฝ”๋“œ ์ •๋ฆฌ  (0) 2023.11.10
[React/Typescript] ๊ฐ€๋กœ์„ธ๋กœ ๋ชจ๋‘ ๋“œ๋ž˜๊ทธ๊ฐ€ ๊ฐ€๋Šฅํ•œ ์Šฌ๋ผ์ด๋“œ ๋งŒ๋“ค๊ธฐ  (2) 2023.11.03
๐Ÿฅฒ ์•„๋‹ˆ, ์ด๊ฒŒ ์™œ ์•ˆ ๋˜๋Š”๊ฑฐ์•ผ?!?! - ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ๊ณผ Promise์— ๋Œ€ํ•˜์—ฌ  (0) 2023.09.10
[๋ฆฌ์•กํŠธ] React-Query - 2. CacheTime , StaleTime (feat.ReactQueryDevtools)  (0) 2023.05.09
[๋ฆฌ์•กํŠธ] React-Query - 1. data fetch & error  (0) 2023.05.08
'๊ฐœ๋ฐœ/React' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • [Redux] Redux toolkit ๊ธฐ์ดˆ ์ฝ”๋“œ ์ •๋ฆฌ
  • [React/Typescript] ๊ฐ€๋กœ์„ธ๋กœ ๋ชจ๋‘ ๋“œ๋ž˜๊ทธ๊ฐ€ ๊ฐ€๋Šฅํ•œ ์Šฌ๋ผ์ด๋“œ ๋งŒ๋“ค๊ธฐ
  • ๐Ÿฅฒ ์•„๋‹ˆ, ์ด๊ฒŒ ์™œ ์•ˆ ๋˜๋Š”๊ฑฐ์•ผ?!?! - ๋น„๋™๊ธฐ ํ”„๋กœ๊ทธ๋ž˜๋ฐ๊ณผ Promise์— ๋Œ€ํ•˜์—ฌ
  • [๋ฆฌ์•กํŠธ] React-Query - 2. CacheTime , StaleTime (feat.ReactQueryDevtools)
๋ฐ(Ming) ๐Ÿˆโ€โฌ›
๋ฐ(Ming) ๐Ÿˆโ€โฌ›
๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป Frontend Developer
๋ฐ(Ming) ๐Ÿˆโ€โฌ›
Ming devlog
๋ฐ(Ming) ๐Ÿˆโ€โฌ›
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ

๊ณต์ง€์‚ฌํ•ญ

  • About Ming ๐Ÿฐ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (261)
    • ๊ฐœ๋ฐœ (255)
      • ๐Ÿ“ TIL (58)
      • โŒ ์˜ค๋ฅ˜ ๋…ธํŠธ (23)
      • React (23)
      • Next.js (11)
      • React-Native (6)
      • JavaScript (10)
      • Flutter (19)
      • Database (1)
      • ๐Ÿ’ฌ ์ฝ”๋”ฉํ…Œ์ŠคํŠธ (21)
      • ๐Ÿ“š English (9)
      • Etc... (25)
      • โ›ต ํ•ญํ•ด99 (49)
    • ๐Ÿ’ป Dev (6)
      • ๐Ÿ“ TIL (4)
      • ๐Ÿ’ฌ Algorithm (1)
      • Etc... (1)

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • leetcode
  • flutter
  • ์˜์–ด๊ณต๋ถ€
  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค
  • twid
  • Firebase
  • ๋ฆฌ์•กํŠธ๋„ค์ดํ‹ฐ๋ธŒ
  • todaywhatidid
  • ํ”Œ๋Ÿฌํ„ฐ
  • ๋ถ€ํŠธ์บ ํ”„
  • ์ฝ”๋”ฉํ…Œ์ŠคํŠธ
  • Git
  • ์ฝ”๋”ฉ๊ณต๋ถ€
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
  • TIL
  • react-native
  • ReactNative
  • nextjs
  • ๊ฐœ๋ฐœ์ž์ผ๊ธฐ
  • ํ•ญํ•ด99
  • github
  • ์ฝ”ํ…Œ
  • ์ด์ฝ”๋…ธ๋ฏธ์ŠคํŠธ
  • react
  • ์•Œ๊ณ ๋ฆฌ์ฆ˜
  • ์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ
  • ๊ฐœ๋ฐœ์žํšŒ๊ณ 
  • ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ
  • ์ฝ”ํ…Œ๊ณต๋ถ€
  • ๋ฆฌ์•กํŠธ

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

250x250
hELLO ยท Designed By ์ •์ƒ์šฐ.v4.2.1
๋ฐ(Ming) ๐Ÿˆโ€โฌ›
[react/typescript] Swiper ์‚ฌ์šฉ๊ธฐ
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๊ฐœ์ธ์ •๋ณด

  • ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ
  • ํฌ๋Ÿผ
  • ๋กœ๊ทธ์ธ

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.