[React] emotion을 중점으로한 다양한 css 적용법

css in js (emotion, styled component)

       - styled component와 비교하면 emotion이 설정이 더 간단하다.

       - emotion이 서버사이드 렌더링할 때도 좀 더 쉽다.

 

emotion 초기설정

             npm i @emotion/react @emotion/styled

※ @emotion/core에서 @emotion/react로 바뀌었다.

 

 

emotion 문법  

export const Label = styled.label`
	margin-bottom:17px;
    ...
    & > span {   // &가 Label을 표현한다. 즉 Label의 자식인 span을 다음과 같이 정의한다로 해석된다.
    	...
    }
 `;

이것을 하기 위해서는 

npm i @emotion/babel-plugin

을 해야한다.

 

그리고, webpack.config.ts에 

...
    module: {
    	rules: [
        	{
            	test:
                loader:
                options: {
                	presets: [
                    	
                    ],
                    env: {
                    	develtopment: {
                        	plugins: [['@emotion', { sourceMaps: true }], ...] <- 이게 필요
                        },
                    },
                },
            },
        ],
    }