react map 활용

Gong Kang·2022년 1월 4일
0

react

목록 보기
3/5

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>
    );
profile
꾸준히 하루에 한번씩..!

0개의 댓글