React에서의 inline style 성능 문제
배경
위 이미지는 내가 만들어야 하는 모달 컴포넌트였고, Next.js의 Image 컴포넌트를 상위 div의 크기에 맞게 반응형으로 크기가 조절되는 기능을 구현해야 했다.
문제 발생
Next.js의 Image 컴포넌트에는 필수 속성이 있는데, width와 height 속성은 Integer 타입의 값으로만 설정할 수 있다.
(참고 1: 링크)
(참고 2: 로컬 이미지는 width와 height를 지정하지 않아도 import된 파일 기반으로 Next가 width와 height를 결정한다.)
그래서 어떻게 100% 반응형을 만들어야 할지 고민하다가 한 블로그 게시물을 보고 아래처럼 코드를 작성하여 PR을 올렸다.
<Image
src={backgroundImage}
alt={`user's background image`}
width={0}
height={0}
sizes='100%'
style={{ height: '100%', width: '100%', objectFit: 'cover' }}
/>이러한 내 코드를 보고 한 팀원분께서 리액트에서의 inline style은 성능에 안 좋다는 걸 보았다고 리뷰를 해 주셨고, 나는 바로 코드를 수정하여 올렸는데, 이에 대해 자세히 알아보고 싶다는 생각이 들었다.
밑은 내가 수정한 코드이다.
<Image
src={backgroundImage}
alt={`user's background image`}
width={0}
height={0}
sizes='100%'
className='h-full w-full object-cover'
/>문제 해결
먼저, ChatGPT에게 질문해 보았다.
나: react에서 div를 만들 때 inline style을 적용하면 성능에 안 좋아?
지피티: React에서 div에 inline style을 적용할 때 성능에 미치는 영향은 상황에 따라 다를 수 있습니다. inline style을 사용하는 것이 항상 성능에 부정적인 영향을 미치는 것은 아니지만, 몇 가지 고려할 사항들이 있습니다:
1. 재사용성 감소: Inline style을 사용하면 CSS 클래스를 사용할 때보다 스타일의 재사용성이 감소합니다. 각 컴포넌트나 엘리먼트마다 개별적으로 스타일을 지정해야 하므로, 동일한 스타일을 여러 곳에 적용하려면 코드 중복이 발생할 수 있습니다.
2. 유지보수성: Inline style은 유지보수가 어려울 수 있습니다. 스타일이 JavaScript와 혼합되어 있기 때문에, 프로젝트가 커지면 스타일을 관리하기 어려워질 수 있습니다.
3. 성능 문제: 성능에 미치는 영향은 대체로 미미하지만, 매우 많은 수의 엘리먼트에 대해 복잡한 inline 스타일을 적용하는 경우, 브라우저가 스타일을 계산하고 렌더링하는 데 더 많은 시간이 소요될 수 있습니다. 특히, 리액트 컴포넌트가 재렌더링될 때마다 inline 스타일 객체가 재생성되면, 이는 성능에 영향을 줄 수 있습니다.
4. CSS-in-JS 라이브러리 사용: styled-components나 emotion과 같은 CSS-in-JS 라이브러리를 사용하면, 컴포넌트 베이스의 스타일링을 효율적으로 관리할 수 있습니다. 이러한 라이브러리들은 성능 최적화를 위해 다양한 전략을 사용합니다.
대부분의 웹 애플리케이션에서는 성능 문제가 미미하지만, 애플리케이션이 복잡해지거나 동적 스타일 변경이 많아지면 성능에 문제가 생길 수도 있다는 얘기였다. React 컴포넌트가 재렌더링될 때마다, inline style로 정의된 객체가 매번 새롭게 생성되기 때문에 발생하는 문제이다.
리액트의 가상 DOM 비교 과정에서 추가적인 부담을 줄 수 있고, 메모리 사용량이 증가하고 가비지 컬렉션의 빈도가 높아질 수 있다고 한다.
그렇다면 이것을 최적화하려면 어떻게 해야 할까?
- 가능하다면 스타일 객체를 컴포넌트 외부에 정의하고 재사용하여, 불필요한 객체 생성을 줄인다.
- 정적인 스타일은 CSS 클래스로, 동적인 스타일은 inline style로 처리한다.
- 복잡한 계산이 필요한 스타일은 React의 useMemo 훅을 사용하여 메모이제이션할 수 있다.
팀 프로젝트를 하니 시야가 좀 더 넓어지는 것 같다. 팀원분들에게 정말 많이 배우고 있다! 항상 감사합니다. (--)(__)
