[react]리액트에서 인라인 스타일을 사용할 때 주의점

트위터를 클론 코딩하다가 주의할 점을 알게되어 정리합니다.

인라인으로 스타일링 하는 방법은 그다지 좋은 방법이 아니지만 프로젝트를 하다보면 어쩔 수 없이 사용해야 하는 경우가 있습니다. 렌더링에 있어서 중요한 점이지만 금방 까먹을 것 같아 블로그 글로 남겨둡니다.

<Button style={{ marginTop: 10 }}>
  로그인 버튼
</Button>

버튼 컴포넌트를 어떤 프레임워크에서 가져왔는데 디자인을 일부 수정해야 할 경우 이렇게 인라인 스타일로 css를 줄 수 있습니다. 그런데, 리액트가 렌더링할 때 해당 부분이 바뀌지 않았음에도 항상 리렌더링됩니다.

{} === {} // false

왜냐하면 두 객체를 비교하면 항상 false값이 나오기 때문입니다. 성능에 크게 문제가 되지 않는다면 굳이 최적화하지 않아도 되지만 성능상에 문제가 있다면 인라인 방법으로 스타일링하면 안됩니다. 이런 경우를 해결하기 위해 두 가지 방법이 있습니다.

1. 스타일드 컴포넌트로 바꾸기

프레임워크로 가져온 컴포넌트를 커스텀하는 방법은 다음과 같습니다.

import styled from 'styled-components';
import { Button } from 'antd';

const CustomButton = styled(Button)`
  margin-top: 10px;
`;
 

styled() 괄호 안에 프레임워크 컴포넌트를 넣어줄 수 있습니다.

2. useMemo 활용하기

스타일드 컴포넌트를 사용하기 번거로운 경우도 있을 수 있습니다. 그때는 useMemo를 활용할 수 있습니다.

const style = useMemo(() => ({ marginTop: 10 }), []);

<Button style=style>
  로그인 버튼
</Button>

useMemo는 의존성 deps가 변경되었을 때만 값을 다시 계산하고 변경되지 않았을때는 기억하고 있기 때문에 다시 렌더링되지 않습니다.

참고로 컴포넌트가 리렌더링 될 때 컴포넌트 return () 부분이 전부 리렌더링되는 것이 아니라 바뀐 부분만 다시 렌더링됩니다.