선생님 페이지네이션 구현 질문있습니다.

[정중식]

mui 페이지네이션을 사용중입니다.

import Pagination from '@mui/material/Pagination'
 

   <Pagination
            count={LAST_PAGE}
            defaultPage={1}
            boundaryCount={2}
            color="standard"
            size="large"
            variant="outlined"
            shape="rounded"
            hidePrevButton
            hideNextButton
            onChange={e => handlePage(e)}
          />

여기서

  count={LAST_PAGE}
            defaultPage={1}

이부분 말인데요..

이부분을 설명드리기보다는 백엔드쪽에서 데이터를 이렇게 주고있습니다.

[
"content":
[
{
"id": 1,
"perfumeName": "테싯",
"brandName": "Aesop",
"strength": "적당한 향",
"duration": "3시간-6시간",
"thumbnailUrl": "url.com"
},
{
"id": 2,
"perfumeName": "블랙베리 앤 ..",
"brandName": "조말론",
"strength": "적당한 향",
"duration": "3시간-6시간",
"thumbnailUrl": "url.com"
}
],
"last": false, // 마지막 페이지
"numberOfElements": 2, // 컨텐츠 개수
... // 다른 정보들도 있지만 무의미하여 생략함
]

last랑 numberOfElement를 백엔드에서 주고있는데 이런경우 어떻게해줘야할까요?

[codingapple]

그냥 서버에서 데이터받아와서 거기있는 정보들을 Pagination 컴포넌트안에 넣으면 될듯요

[정중식]

센세 감사합니다 한가지 더 여쭙고싶은데요,

FlexBox라는 css flex 컴포넌트를 만들었어요

이런식으로

const FlexBox = ({
  children,
  direction = "row",
  justifyContent,
  alignItems,
  gap,
  style,
  onClick,
}: FlexBoxProps) => {
  return (
    <div
      role={"presentation"}
      onClick={onClick}
      style={{
        display: "flex",
        flexDirection: direction,
        justifyContent: justifyContent,
        alignItems: alignItems,
        gap: gap,
        ...style,
      }}
    >
      {children}
    </div>
  );
};

이걸 실제 사용하면 이렇습니다
 <FlexBox alignItems="center" style={{gap:"20px"}}>
...

</FLexBox>

근데 팀플젝하시는 분께서 가급적이면 인라인 스타일 사용하면 안좋다고하는데요, 이유는 재랜더링 이슈가 발생한다고합니다.
여기참고
그래서 저렇게 flexBox컴포넌트에서 스타일주는것도 제가 올린 "여기참고" 링크에의하면 안좋은거같은데 맞을까요?
그러면 flexBox 컴포넌트같은경우 어떤식으로 수정을해줘야 좀 유연하게 사용이가능할까요?
(mui sx로 스타일주는거나 tailwindcss 제외)
 

[정중식]

import {useMemo} from 'react'

interface FlexBoxProps {
  children: any
  direction?: any | undefined
  justifyContent?: string
  alignItems?: string
  gap?: string
  style?: any
  onClick?: React.MouseEventHandler<HTMLDivElement>
}

const FlexBox = ({
  children,
  direction = 'row',
  justifyContent,
  alignItems,
  gap,
  style,
  onClick,
}: FlexBoxProps) => {
  const {customStyle} = useMemo(() => ({...style}), [style])

  return (
    <div
      role={'presentation'}
      onClick={onClick}
      style={{
        display: 'flex',
        flexDirection: direction,
        justifyContent: justifyContent,
        alignItems: alignItems,
        gap: gap,
        ...customStyle,
      }}
    >
      {children}
    </div>
  )
}

export default FlexBox

useMemo를 사용해서 구현해줬는데 괜찮아보이나요?

[정중식]

아 근데 스타일 적용이 안되는버그가있네요 ㅜㅠㅠ

[정중식]

  const customStyle = useMemo(() => ({...style}), [style])

이렇게하니까 적용은되네요 근데 콘솔찍어보면

  console.log(customStyle)


이런식인데 괜찮나요?

[codingapple]

style속성 안건드릴거면 className 건드리는거밖에 없을텐데 다양한 스타일로 활용하고 싶으면 그게 더 복잡해보입니다
FlexBox 부모 컴포넌트 재렌더링시킬 때 FlexBox는 재렌더링 되나 안되나 출력해봅시다

[정중식]

선생님 혹시 정말 죄송한데 몰라서그러는데.. 말씀하신 FlexBox 재렌더링 되나 안되나 출력해보라는 말씀은 어떻게 테스트 하면될까요?

[codingapple]

컴포넌트안에 console.log 써보면 될듯요

[글쓴이]

글