⛏️selector로 렌더링 최적화 (react,next js)

Viking_J·2024년 12월 22일

uncook

😤 문제

“어떤 문제가 있었나요”

버튼을 누르면 누른 버튼 색이 바뀐다.
그런데 버튼 하나를 누르면 색이 변하지 않는 모든 버튼이 리렌더링 된다.

🧐 문제 원인

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

버튼 컴포넌트가 전역 상태를 가지고 있기 때문에 렌더링 변화가 없어도 전역상태가 바뀌면 리렌더링이 된다.

😎 해결책

“해결책”

selector의 반환 값을 해당 버튼이 활성화 되었는지에 대한 값으로 바꾸어 값이 변하는 경우만 렌더링 되게 한다.

//before: 전역 상태 id를 사용 => isActive 값이 변하지 않아도 id만 변해도 리렌더링
const id = useStoreSelector(splitViewStore, (state) => state.id)
const isActive = splitViewId === id

//after: isActive 값이 바뀔 때만 리레더링
const isActive = useStoreSelector( splitViewStore,(state) => state.id === splitViewId)

🤔 이유

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

전역 상태를 사용하는 컴포넌트는 그 전역 상태 값이 바뀔 때 업데이트 해야 하는 컴포넌트로 콜백에 등록이 된다.

그런데 selector를 사용하여 어떤 값이 어떻게 변경 되었을 떄 업데이트 시켜줄지 정해줄 수 있다

🤩 적용

“어떻게 적용했나요”

//before
function OpenSplitView({ children, splitViewId }: OpenSplitViewProps) {
  const id = useStoreSelector(splitViewStore, (state) => state.id)
  const isActive = splitViewId === id

  const handleOpenSplitView = () => {
    splitViewStore.setState({
      isOpen: true,
      id: splitViewId,
    })
  }

//after
function OpenSplitView({ children, splitViewId }: OpenSplitViewProps) {
  const isActive = useStoreSelector(
    splitViewStore,
    (state) => state.id === splitViewId,
  )

  const handleOpenSplitView = () => {
    splitViewStore.setState({
      isOpen: true,
      id: splitViewId,
    })
  }