🍊[React] 1. transient prop은 성능에 영향을 미칠까?

결론: 미미하다!

: 라이브러리 개발자는 당연히 너보다 똑똑하다~

transient prop

• styled-component에서 사용되는 친구
• prop 앞에 $를 붙여 사용
• prop으로 전달된 요소들은 HTML태그의 속성으로 들어가지만, transient prop을 사용하면 style에만 전달 가능

예시

이런 컴포넌트를 만든다고 했을 때

return (
    <div>
      <Circle $color={color} />
      <Slider ref={sliderRef} />
    </div>
  )

▼ transient prop

<div class="sc-braxZu fLWFCQ"></div>

▼ 일반 prop

<div class="sc-elDIKY hoQMrg" color="#000000"></div>

동적으로 스타일을 바꿀 때, prop이 많아지면
쓸모 없는 속성이 많아져 가독성이 떨어진다

이를 방지하기 위해 나온 게 transient prop

성능 상 이점이 있을까?

• 변경된 사항을 실제 dom 요소에 전달하지 않는 것처럼 보인다
• 그렇다면 성능상에서도 이점을 가지지 않을까?

조건

• 개발자모드 cpu 쓰로틀링 x6
• transient 이외에는 같은 코드

실험 코드

function Dungdung() {
  const [color, setColor] = useState('000000')
  const sliderRef = useRef(null)

  useEffect(() => {
    const slider = sliderRef.current

    const handleInput = () => {
      const hexcolor = `#${parseInt(slider.value, 10).toString(16).padStart(6, '0')}`
      setColor(hexcolor)
    }

    slider.addEventListener('input', handleInput)
    return () => {
      slider.removeEventListener('input', handleInput)
    }
  }, [])

  return (
    <div>
      <Circle color={color} />
      <Slider ref={sliderRef} />
    </div>
  )
}

const Circle = styled.div`
  background-color: ${({ color }) => color};
  width: 200px;
  height: 200px;
  border-radius: 50%;
  margin: 30px 30px;
`

결과

1. just prop
   
   ▲ 마우스보다 약간 밀리는 모오습

2. transient prop
   
   ▲ 똑같이 밀리는 모오습

생각보단 별 차이가 없는 것 처럼 보인다

왜 차이가 나지 않는가

1. virtual dom

공식문서

• virtual dom 을 생성해, 실제 dom과 비교하여 달라진 부분만을 재 렌더링 하기 때문
• dom에 불필요한 속성이 전달되든 안되든 상관 없음

2. caching

• 실험 도중 바를 한번 왕복 한 이후에는 부드럽게 움직임
• 내부적으로 class를 만들어 한 번 생성한 경우 다시 생성하지 않음

결론: 성능 보다는 가독성을 위해 사용하는 것이 권장된다!

여담

const Circle = styled.div.attrs(({ color }) => ({
  style: {
    backgroundColor: color,
  },
}))`
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 10px 10px;
`

보기는 더럽지만 이 코드가 제일 렉이 덜 걸림
바를 움직여도 class가 변하지 않아서 그런 듯 하다

inlie style은 캐싱이 되지 않아
class를 사용한 styled-component보다 성능 상 뒤쳐져야 하지만
렌더링 할 게 많아지면 오히려 성능 상 이점을 가질 수도 있는 것일까

사실 나는 정답을 알고 있지만 여백이 부족해 더 이상 적지 않는다