React에서 inline style을 쓰지 말아야하는 이유

React에서 인라인 스타일을 쓰게 되면 아래와 같이 style 객체를 추가해야 하는데

<div style={{ marginTop: '10px' }}>
  <Button type="primary" htmlType="submit" loading={false}>로그인</Button>
</div>

 

객체는 검사를 할 때마다 무조건 다름으로 인식한다.

//console
{} === {}
false

즉, 리액트에서 vertual Dom으로 검사하면서 어디가 달라졌나 찾다가 달라진 부분이 있으면 그 영역을 리랜더링 시키는데 inline style 객체를 추가하면 매번 다름으로 인식해서 해당 부분을 계속 리랜더링 시킨다.

 

그럼 inline style 말고 스타일을 어떻게 적용하면 좋을까?

 

바로 styled-component 사용하기!!

import styled from 'styled-components';

const Wrap = styled.div`
  padding: 10px;
`;

const Page = () => {
	return(
        <Wrap>
            내용입니다.
        </Wrap>
    )
};

export default Page;

 

* 참고로 리랜더링시 return 안에 모든 내용이 리랜더링 되지 않는다. 즉 변경된 부분만 리랜더링 된다.