📏단일 책임 원칙으로 렌더링 개선(react next js)

Viking_J·2024년 12월 22일

uncook

😤 문제

“어떤 문제가 있었나요”

splitView 내용만 바뀌는 데 splitView 컨테이너까지 리렌더링 된다.

🧐 문제 원인

“문제 원인이 무엇인가요”

splitView 컨테이너 열고 닫는 로직과 내용 바꾸는 로직이 같은 컴포넌트에 있다. 그래서 내용이 바뀔 때 컨테이너 까지 리렝더링

😎 해결책

“해결책”

단일 책임 원칙으로 splitView 안에 내용을 결정하는 컴포넌트와 splitView 열고 닫는 컴포넌트로 분리한다.

🤔 이유

“왜 이런 해결책 사용했나요”

splitView 안에 내용을 결정하는 컴포넌트가 분리되면 안에 내용이 바뀌어을 때 컨테이너는 영향을 받지 않는다.

splitViewContainer prop 가독성이 더 좋아졌다. 클린 코드!

🤩 적용

“어떻게 적용했나요”

비포

//분리 전
import SecondaryViewContainer from "./SecondaryViewContainer "
function SplitViewContainer({ PrimaryView }: SplitViewContainerProp) {
  //여는 로직
  const isOpen = useStoreSelector(splitViewStore, (state) => state.isOpen)
  //안에 내용 결정 로직
  const id = useStoreSelector(splitViewStore, (state) => state.id)
  const Content = id != null ? ssulContents[id] : () => null

  return (
    <div className="relative flex size-full justify-end">
      <div
        className={`absolute size-full lg:w-3/6 ${
          isOpen ? 'lg:left-0' : 'lg:left-1/2 lg:-translate-x-1/2'
        } overflow-y-scroll transition-all duration-300 ease-out`}
      >
        {PrimaryView}
      </div>
      {isOpen && (
        <div className="size-full animate-slide-in-right lg:w-5/12">
          <SecondaryViewContainer>
            <Content />
          </SecondaryViewContainer>
        </div>
      )}
    </div>
  )
}

애프터

//컨테이너(열고 닫는 로직만 담당)
function SplitViewContainer({
  PrimaryView,
  SecondaryView,
}: SplitViewContainerProp) {
  const isOpen = useStoreSelector(splitViewStore, (state) => state.isOpen)

  return (
    <div className="relative flex size-full justify-end">
      <div
        className={`absolute size-full lg:w-3/6 ${
          isOpen ? 'lg:left-0' : 'lg:left-1/2 lg:-translate-x-1/2'
        } overflow-y-scroll transition-all duration-300 ease-out`}
      >
        {PrimaryView}
      </div>
      {isOpen && (
        <div className="size-full animate-slide-in-right lg:w-5/12">
          {SecondaryView}
        </div>
      )}
    </div>
  )
}
//컨텐트 (안의 내용물 결정 로직만 담당)
function SecondaryViewContent({ id }: SecondaryViewContentProps) {
  const id = useStoreSelector(splitViewStore, (state) => state.id)
  const Content = id != null ? ssulContents[id] : () => null

  return (
    <article className="prose size-full !max-w-full py-5 md:prose">
      <Content />
    </article>
  )
}

분리하고 나니까 prop도 더 가독성이 좋아졌다.

//before
//세컨더리뷰는 어딨지? 의문인 코드
function Page() {
  return <SplitViewContainer PrimaryView={<PrimaryViewContainer/>} />
}
//after
//프라이머리 뷰와 세컨더리 뷰가 각각 어떤 컴포넌트지 알수 있다.
function Page() {
  return (
    <SplitViewContainer
      PrimaryView={<PrimaryViewContainer/>}
      SecondaryView={<SecondaryViewContainer/>}
    />
  )
}