종속성 상태가 변경되지 않았는데도 useEffect가 트리거되는 것 같나요?
<p>저는 React 프로젝트에서 캐러셀 컴포넌트를 구축하려고 합니다. 실제로 DOM을 직접 수정하는 대신 Refs를 사용하여 순수 JS로 작성된 기존 캐러셀 컴포넌트를 활용하려고 합니다. 시퀀스의 첫 번째 슬라이드를 현재 슬라이드(className current-slide 사용)로 표시하여 회전식 슬라이드를 초기화하려고 하면 문제가 발생합니다. 이 작업을 {topMovies}가 종속성인 useEffect 후크에 넣었습니다. {topMovies}는 prop을 통해 캐러셀 구성요소에 전달되는 객체 배열이므로 topMovies가 변경되면(예: 로드) useEffect가 실행되어야 합니다. 이것은 작동합니다. 로딩 후 캐러셀의 첫 번째 슬라이드에는 클래스 이름 'current-slide'가 지정됩니다. </p>
<p>그러나 두 번째 코드 부분(nextSlide 및 moveToSlide)은 다음 슬라이드를 선택하는 함수의 시작 부분입니다. className이 'current-slide'인 하위 요소를 선택하고 해당 className을 제거할 수 있도록 트랙 Ref(즉, 모든 슬라이드의 컨테이너)를 함수에 전달합니다. 이 방법도 작동하지만 짧은 지연(~1초) 후에 className 'current-slide'가 다시 나타납니다.</p>
<pre class="brush:php;toolbar:false;">const Carouselv2 = ({topMovies}) => {
//참조
const trackRef = useRef();
const nextBtnRef = useRef();
const prevBtnRef = useRef();
const navDotsRef = useRef();
//소품 로드 시 캐러셀 초기화
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
if (topMovies && setIsLoading) {
const 슬라이드 = Array.from(trackRef.current.children);
Slides[0].classList.add('current-slide'); //첫 번째 슬라이드를 표시되도록 표시
const SlideWidth = 슬라이드[0].getBoundingClientRect().width;
const setSlidePosition = (슬라이드, 인덱스) => {
Slide.style.left = SlideWidth * 인덱스 + 'px';
}
Slides.forEach(setSlidePosition); //슬라이드를 서로 나란히 정렬
setIsLoading(false);
}
}, [topMovies]);
//버튼 기능
const moveToSlide = (currentSlide, targetSlide) => {
//trackRef.current.style.transform = 'translateX(-' + targetSlide.style.left + ')';
currentSlide.classList.remove('현재-슬라이드');
//targetSlide.classList.add('현재-슬라이드');
}
const updateDots = () => {
}
const ResponseBtns = () => {
}
const prevSlide = (e) => {
}
const nextSlide = (e) => {
const currentSlide = trackRef.current.querySelector('.current-slide');
const nextSlide = trackRef.current.children.nextElementSibling;
moveToSlide(currentSlide, nextSlide);
}
반품 (
<div className="carousel">
<button className="carousel_button carousel_button--left" ref={prevBtnRef}><FontAwesomeIcon icon={faCircleLeft} size="xl" style={{ color: "white" }} /></button> ;
<div className="carousel_track-container">
<ul className="carousel_track" ref={trackRef}>
{topMovies && topMovies.map((영화) => (
<li className="carousel_slide">
<img src={movie.image} alt="" />
<h2>{영화.제목}</h2>
</li>
))}
</ul>
</div>
<button onClick={(e) => nextSlide(e)}className="carousel_button carousel_button--right" ref={nextBtnRef}><FontAwesomeIcon icon={faCircleRight} size="xl" style={{ 색상: "흰색" }} /></button>
<div className="carousel_nav" ref={navDotsRef}>
<button className="carousel_indicator current-slide"></button>
{topMovies && Array.apply(0, Array(topMovies.length)).map(() => {
반환 <button className="carousel_indicator"></button>
})}
</div>
</div>
);
}</pre>
<p>처음에는 어떤 이유로 className을 변경하면 useEffect가 실행될 것이라고 생각하여 isLoading 조건이 있는 if 문을 추가했습니다. 그러나 그것은 작동하지 않았으므로 버그가 useEffect 후크에서 비롯된 것이라고 생각하지 않습니다. </p>
<p>이 점 때문에 매우 혼란스럽습니다. 하지만 Refs를 처음 사용하는 것이므로 아주 분명한 것을 놓치고 있을 가능성이 충분히 있습니다. 도와주셔서 감사합니다! </p>
