[React] 페이지 버튼 클릭 후 css 효과 유지하기(현재 페이지 표시)

페이지네이션을 구현하던 중 현재 있는 페이지버튼에 포커스를 두고 싶었다. chatgpt한테 물어보니 styled-component에서 v5까지 지원하는 isActive 속성을 알려줬다. 하지만 나는 v6을 사용하고 있기에 warning이 뜨기도 하고 어디선가 사용방법이 달라 원하는대로 결과가 나오지 않아 다른 방법을 찾아보았다.
 
나는 페이지의 한 배열이 [1, 2, 3, 4, 5], [6, 7, 8, 9, 10]과 같이 5개씩이었다. 그래서 state변경을 위해

const [isActive, setIsActive] = useState([true, false, false, false, false]);

이렇게 넣어줬다. 배열의 처음을 true로 설정한 이유는 페이지가 새로고침되거나 다음 배열로 넘어가는 화살표를 누르게 되면 첫페이지에 포커스를 두고 싶었기 때문이다.

const isactive = (page) => {
    const initialActive = [true, false, false, false, false];
    initialActive[0] = false
    initialActive[(page - 1) % 5] = true
    setIsActive(initialActive);
}

그러면 이제 state 변경을 위한 함수를 만들어준다. 위에서 언급한 것처럼 첫페이지에 포커스를 두기 위해 t f f f f로 초기화했다. 그 다음 param으로 받은 page에 포커스를 두기 위해 일단 0번째 배열을 false로 변경, page에 해당하는 배열의 인덱스를 true로 수정한다.
page는 1부터 시작하지만 끝이 10일수도, 23일수도 있다. 해당 페이지에 맞는 인덱스를 찾기 위해 (page - 1) % 5를 해주었다. 만일 페이지가 23이라면 (23 - 1) % 5 = 2이기에 f f t f f가 되는 것이다.
수정 후 setIsActive를 해준다.

const pagination = (slicePages, currentPage) => {
    return slicePages[currentArray]?.map((page, index) => (
        <PageButton
            key={index}
            onClick={() => {onPageChange(currentArray, page); isactive(page)}}
            className={isActive[(page - 1) % 5] ? 'active' : ''}
        >
            {page}
        </PageButton>
    ));
}

클릭을 하면 페이지가 변경이 되니 onClick에 isactive함수를 넣어줬다. 그리고 클릭된 페이지에 해당하는 인덱스의 클래스를 active로 설정해준다. 

그러면 이렇게 포커스가 잘 되는 것같지만

화살표를 눌러보면 내가 5에서 화살표를 눌렀다면 10에 머물러있는 현상을 볼 수 있다. 페이지 자체는 6이 뜨지만.

return (
    <Paging>
        <SideBtn 
            onClick={()=>{setPage(currentArray - 1, slicePages); isactive(1)}} 
            disabled={currentArray === 0}
            >
            &lt;
        </SideBtn>
            {pagination(slicePages, currentPage)}
        <SideBtn 
            onClick={()=>{setPage(currentArray + 1, slicePages); isactive(1)}} 
            disabled={currentArray === slicePages.length - 1}>
            &gt;
        </SideBtn>
    </Paging>
)

그래서 화살표 버튼에도 onClick이벤트를 추가해주었다. 위에서는 isactive(page)였지만 page대신 1을 넣어 만약 3에서 오른쪽 화살표를 누르면 6에 포커스가 되는 것처럼 배열의 0번째 인덱스에 포커스가 가게 설정했다.
 

그러면 이렇게 완성된다!
 
전체코드

import { useState } from "react";
import styled from "styled-components";

const Pagination = ({ slicePages, currentArray, currentPage, onPageChange }) => {
	const [isActive, setIsActive] = useState([true, false, false, false, false]);

	const isactive = (page) => {
            const initialActive = [true, false, false, false, false];
            initialActive[0] = false
            initialActive[(page - 1) % 5] = true
            setIsActive(initialActive);
	}

	const pagination = (slicePages, currentPage) => {
        return slicePages[currentArray]?.map((page, index) => (
            <PageButton
                key={index}
                onClick={() => {
                	onPageChange(currentArray, page); 
                    isactive(page);
                 }}
				className={isActive[(page - 1) % 5] ? 'active' : ''}
            >
                {page}
            </PageButton>
        ));
    }

	return (
		<Paging>
			<SideBtn 
				onClick={()=>{setPage(currentArray - 1, slicePages); isactive(1)}} 
				disabled={currentArray === 0}
				>
				&lt;
			</SideBtn>
				{pagination(slicePages, currentPage)}
			<SideBtn 
				onClick={()=>{setPage(currentArray + 1, slicePages); isactive(1)}} 
				disabled={currentArray === slicePages.length - 1}>
				&gt;
			</SideBtn>
		</Paging>
	)
}

const PageButton = styled.button`
    font-size: 27px;
    color: #4659A9;
    border: transparent;
    background-color: transparent;
    margin-bottom: 40px;
	&.active {
		color: #ffffff;
		background-color: #4659A9;
	}
`
const SideBtn = styled.button`
    font-size: 27px;
    color: #4659A9;
    border: transparent;
    background-color: transparent;
`
const Paging = styled.div`
    grid-area: pagination;
`;

export default Pagination;

 
 
 
 
 
참고 자료 
https://velog.io/@vivid0930/TIL50-02-%EB%A6%AC%EC%95%A1%ED%8A%B8-css-%EB%B2%84%ED%8A%BC-%ED%81%B4%EB%A6%AD-%ED%9B%84-%EB%B2%84%ED%8A%BC-%EC%95%A1%EC%85%98-%EC%9C%A0%EC%A7%80%ED%95%98%EA%B8%B0