[페이지네이션] 숫자 클릭 시 ui깨지는 현상 해결

문제 배경

StyledPaginationContent에서 PaginationLink 컴포넌트로 감싸진 숫자들이 map 함수 안에 있기 때문에 숫자가 클릭될 때마다 PaginationLink 컴포넌트가 생성 =>  따라서 PaginationLink 컴포넌트가 생성되고 삭제될 때마다 레이아웃이 변경되어 숫자들이 살짝씩 밀리는 현상이 발생

 

 

해결 방법

이를 해결하기 위해서는 PaginationLink 컴포넌트를 map 함수 밖으로 이동하여 PaginationLink 컴포넌트가 한 번만 생성되도록 해야 함

 

단순하게, map함수를 감싸는 것이 PaginationLink가 아니게 하면 된다.

<div>태그로 감싸면서 문제를 해결했다

 

 

코드 비교

<수정 전>

  <Pagination>
      <StyledPaginationContent>
        <PaginationLink href={`${item[0]}`} onClick={handlePrevious}>
          <PaginationPrevious />
        </PaginationLink>
        <PaginationLink href={`${clicked}`} onClick={handlePrevious}>
          {item.map(num => (
            <StyledPaginationItem
              key={num}
              isActive={clicked === num}
              onClick={() => handleClick(num)}
            >
              {num}
            </StyledPaginationItem>
          ))}{" "}
        </PaginationLink>

        <PaginationLink href={`${item[0]}`} onClick={handleNext}>
          <PaginationNext />
        </PaginationLink>
      </StyledPaginationContent>
    </Pagination>

 

<수정 후>

<Pagination>
      <StyledPaginationContent>
        <PaginationLink href={`${item[0]}`} onClick={handlePrevious}>
          <PaginationPrevious />
        </PaginationLink>
        <PaginationLink href={`${clicked}`} onClick={handlePrevious}>
          <div>
            {item.map(num => (
              <StyledPaginationItem
                key={num}
                isActive={clicked === num}
                onClick={() => handleClick(num)}
              >
                {num}
              </StyledPaginationItem>
            ))}{" "}
          </div>
        </PaginationLink>

        <PaginationLink href={`${item[0]}`} onClick={handleNext}>
          <PaginationNext />
        </PaginationLink>
      </StyledPaginationContent>
    </Pagination>