양심의 가책을 느끼며 인라인 스타일링을 하고있는 당신..

처음에는 스타일링을 일일히 페이지 별로 만들어서 했었다.
예를 들어서

export const Container = styled.div`
	display : flex;
	flex-flow : column nowrap;
	..... 이런식으로
`

그런데 이렇게 하다보니까. 한번 쓰고 정작 안쓰게 되는 것 같기도 하고,
만들어놓고나니까, 재사용해야할 것 같은 은근한 압박감이 들면서도 쓰게되면 결국에 인라인 스타일링을 하게되어서 결국에 쓰게 된 것은..

<div style={{display:'flex', flexFlow:'column nowrap'}}></div>

이러한 인라인 스타일링이었다.
이렇게 쓰면 단점이 몇가지 있는데,
1. 컴포넌트를 렌더링할때마다 스타일링 개체가 재생성된다. -> 성능 저하 ( 저하되더라도, 사용에는 문제가 별로 없을 테지만.. )
2. 인텔리제이의 도움을 받을 수 없다. 보면 문자열 안에 리터럴로 스타일링을 하는데 저기에는 자동완성의 도움을 받을 수 없다.

때문에 이 2가지의 문제점을 수정하려면
이 css in js를 쓰면 된다.

<div className={css`
     display: flex;
     flex-flow: column nowrap;
     `}></div>

이런식의 사용이다.
이렇게 되면 className을 중복을 피해서 자동으로 고유하게 생성해준다.
클래스 명은 css-11sgpwp이렇게 생겼다.
쓰다보면 양심적으로 가책을 느끼게 되는데 React-Emotion 같은 경우에는 사용되지 않는 스타일을 자동으로 제거한다. 이를 스타일 캐싱이라고 한다.
그리고 emotion은 스타일을 캐시해서 동일한 스타일이 여러번 정의되지 않도록 한다. 동일한 스타일이 여러 컴포넌트에서 사용될 때 새로운 스타일 개체를 생성하지 않고, 캐시된 스타일을 재사용하는 방식이다.

그래도 너무 양심의 가책을 느낀다면 처음에 말했던

export const Container = styled.div`
	display : flex;
	flex-flow : column nowrap;
	..... 이런식으로
`

이런식의 스타일이 적용된 요소를 사용하면 되겠다.