[TIP ReactJS] Material-UI에서 애니메이션을 제거하여 성능 향상 처리

[TIP ReactJS] Material-UI에서 애니메이션을 제거하여 성능 향상 처리

얼마전 회사 내에서 ReactJS의 디자인 라이브러리에 대한 비교를 하였습니다.

비교 디자인 라이브러리 목록

• ant design
• Material-ui
• React-Bootstrap

비교 결과

우선 React-Bootstrap의 경우 애니메이션 효과가 전혀 없기 때문에 동일한 랜더링 결과를 확인할 수 없다고 판단되었습니다.
따라서 Material-UI에서 애니메이션 효과를 제거하는 코드를 반영해보았습니다.

Material-UI에서 애니메이션 효과를 제거하는 코드

각 컴포넌트마다 애니메이션 효과를 제거할 수도 있고, 전체적으로 제거 할 수 있습니다.

아래는 모든 컴포넌트에서 애니메이션 효과를 제거하는 코드입니다.

import { createMuiTheme, ThemeProvider } from '@material-ui/core';

const theme = createMuiTheme({
  props: {
    // Name of the component ⚛️
    MuiButtonBase: {
      // The properties to apply
      disableRipple: true, // No more ripple, on the whole application 💣!
    },
  },
  transitions: {
    // So we have 'transition: none;' everywhere
    create: () => 'none',
  },
});

export default (props) => {
  <ThemeProvider theme={theme}>
    <div className={classes.root}>
    ....
    </div>
  </ThemeProvider>
}

결과

Material-UI에서 애니메이션 효과를 제거 후 UI 성능은 눈에 띄게 좋아졌습니다.

추가적으로 저성능 디바이스에서는 애니메이션 효과를 제거하고 사용하는 것을 추천합니다.

참고 자료

• Disabling animations either per-component or globally
• Theming