react function 컴포넌트 js영역에서 html 엘리먼트를 제어하는 방법
이미지 슬라이드에서 인디케이터 원 부분 색칠하는 부분에 활용했음
return 구문의 html 영역에서 작성하는 것보다 js 영역에서 다루는 것이
코드적으로 깔끔하다
circleLit 변수를 이용해 접근했다
const circleList = imgData.map(item => {
if(item.key === currentSlide){
return (
<CircleFocused key={item.key}/>
)
}else{
return (
<CircleBasic key={item.key}/>
)
}
})
return (
<Container>
<SliderContainer ref={slideRef}>
{imgData.map(item => (
<SliderImg key={item.key} src={item.value}/>
))}
</SliderContainer>
<CircleWrapper>
{circleList}
</CircleWrapper>
<ArrowBackBtn onClick={moveLeft}>
<ArrowBackIosIcon sx={{fontSize: 40}}/>
</ArrowBackBtn>
<ArrowForwardBtn onClick={moveRight}>
<ArrowForwardIosIcon sx={{fontSize: 40}}/>
</ArrowForwardBtn>
</Container>
);