Swiper 새로고침시 이전에 보던 슬라이드 가운데로 오게하기

Question

// main.jsx import React, {useEffect, useState} from 'react'; import {Link, useLocation, useNavigate} from "react-router-dom"; import classnames from "classnames"; import "./main.scss" import 'swiper/scss'; import 'swiper/scss/navigation'; import 'swiper/scss/pagination'; import { Swiper, SwiperSlide } from 'swiper/react'; function Main() { const navigate = useNavigate(); const location = useLocation(); const [urlTitle, setUrlTitle ] = useState(""); const [activeSlide, setActiveSlide] = useState(-1); // 현재 선택된 슬라이드의 인덱스 const traineeUrls = ["/aaa","/bbb","/ccc","/ddd"] console.log(`urlTitle : ${urlTitle} / activeSlide : ${activeSlide}`) useEffect(() => { setUrlTitle(location.pathname.split("/")[2]) setActiveSlide(traineeUrls.indexOf("/" +urlTitle)) }, [ location, urlTitle, activeSlide]) // ****************************************** return (

{ setActiveSlide(swiper.activeIndex); navigate(traineeUrls[swiper.activeIndex]); }} > setActiveSlide(0)} >

aaa

setActiveSlide(1)} >

bbb

setActiveSlide(2)} >

ccc

setActiveSlide(3)} >

ddd

메인

) } export default Main;// index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Main from "./pages/Main"; import Aaa from "./pages/Aaa"; import Bbb from "./pages/Bbb"; import Ccc from "./pages/Ccc"; import Ddd from "./pages/Ddd"; import {createBrowserRouter, RouterProvider} from "react-router-dom"; const router = createBrowserRouter ([ { path: '/', element: , children: [ {index: true, path: "/", element:

}, {path: '/aaa', element: }, {path: '/bbb', element: }, {path: '/ccc', element: }, {path: '/ddd', element: }, ] } ]); const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); reportWebVitals(); 이런식으로 test용 swiper를 만들었는데 새로고침할 경우 자신의 url에 맞는 slide를 가운데로 오게하고 싶은데 무조건 제일 처음것이 가운데 정렬이 됩니다.3시간동안 해보다가 안되어서 질문드립니다ㅠㅠ깃허브 주소도 올립니다.https://github.com/hyekyeong123/2023_react_study

jhg097 · Answer

리액트의 경우 새로고침의 타이밍이 너무 어렵네요. 자꾸 무한로딩되고버전은 방금 설치한 따끈따끈한 아이들입니다. { &#34;name&#34;: &#34;my-app&#34;, &#34;version&#34;: &#34;0.1.0&#34;, &#34;private&#34;: true, &#34;dependencies&#34;: { &#34;&#64;testing-library/jest-dom&#34;: &#34;^5.16.5&#34;, &#34;&#64;testing-library/react&#34;: &#34;^13.4.0&#34;, &#34;&#64;testing-library/user-event&#34;: &#34;^13.5.0&#34;, &#34;classnames&#34;: &#34;^2.3.2&#34;, &#34;node-sass&#34;: &#34;^8.0.0&#34;, &#34;react&#34;: &#34;^18.2.0&#34;, &#34;react-dom&#34;: &#34;^18.2.0&#34;, &#34;react-router-dom&#34;: &#34;^6.8.2&#34;, &#34;react-scripts&#34;: &#34;5.0.1&#34;, &#34;swiper&#34;: &#34;^9.1.0&#34;, &#34;web-vitals&#34;: &#34;^2.1.4&#34; }, &#34;scripts&#34;: { &#34;start&#34;: &#34;react-scripts start&#34;, &#34;build&#34;: &#34;react-scripts build&#34;, &#34;test&#34;: &#34;react-scripts test&#34;, &#34;eject&#34;: &#34;react-scripts eject&#34; }, &#34;eslintConfig&#34;: { &#34;extends&#34;: [ &#34;react-app&#34;, &#34;react-app/jest&#34; ] }, &#34;browserslist&#34;: { &#34;production&#34;: [ &#34;>0.2%&#34;, &#34;not dead&#34;, &#34;not op_mini all&#34; ], &#34;development&#34;: [ &#34;last 1 chrome version&#34;, &#34;last 1 firefox version&#34;, &#34;last 1 safari version&#34; ] } }

스르르 · Answer

Swiper 컴포넌트 initialSlide를 0 처럼 고정값을 전달하지 말고, state를 사용해보세요. activeSlide에 이미 슬라이드 인덱스가 담겨있으니까 이 값을 활용하시면 되겠네요.무한로딩의 원인은 useEffect 디펜던시 때문입니다. 지금 보시면 실행로직에 setUrlTitle이 있고, 디펜던시에 urlTitle이 있는데요. urlTitle이 업데이트 될 때마다 setUrlTitle이 실행될텐데, setUrlTitle은 urlTitle을 업데이트 시키고, 그럼 다시 useEffect가 돌면서 setUrlTitle이 실행되는 무한루프에 빠집니다. activeSlide도 그렇구요. useEffect는 아래와 같은 방향으로 수정해주시는게 좋을 것 같아요.useEffect(() => { const newUrlTitle = location.pathname.split("/")[2] if(newUrlTitle){ setUrlTitle(newUrlTitle) setActiveSlide(traineeUrls.indexOf("/" +newUrlTitle)) } }, [ location, traineeUrls ])불필요한 의존성을 삭제하고 location, traineeUrls 가 변경될 때만 콜백함수가 실행되도록 변경한 코드입니다.

jhg097 · Answer

아 해결했습니다. 그냥 useEffect가 아니라 바깥에서 하면 되는거였네요.

Swiper 새로고침시 이전에 보던 슬라이드 가운데로 오게하기

3개의 답변

Q&A 목록