2차 클론 프로젝트에서 쓸 styled components를 연습해볼겸 블로깅 해보려 한다.
CSS in JS?
CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법이다.
기존에 HTML과 CSS 그리고 JavaScript를 별도의 파일로 두는 것이 Best Practice였다면,
React에서는 여러개의 컴포넌트롤 분리하고, 각각의 컴포넌트에 HTML,JS가 한번에 들어있는식으로 사용된다. 비슷한 방식으로 CSS-in-JS 라이브러리만 사용하면 CSS도 JavaScript에 삽입할 수 있다.
- 활용
props 활용동적으로 스타일을 적용하기 위해서 가장 많이 사용되는 활용 방법이다. 부모에서 자식 컴포넌트에 값을 넘겨줄 때 props를 사용한 것처럼, 이를 활용해서 조건에 따른 스타일링을 할 수 있다.
thmem
color, fontSize등 공통된 테마는 theme.js에서 선언해서 각 컴포넌트에서 props로 받아 스타일을 적용할 수 있다. ThemeProvider의 속성으로 넘겨주면 전역에서 사용할 수 있다.
mixin
자주 사용하는 css 스타일에 대해서는 variables.js 파일을 별도로 생성하여 사용하는 게 좋다. variables.js 파일은 theme과 variables를 Theme Provider에 같이 prop으로 합쳐서 전역에서 사용하거나, 사용하고자 하는 파일에서만 import해서 mixin을 사용할 수 있다. 나는
사용하고자 하는 컴포넌트에서 flex.js 파일을 import해서 사용했다.
실제 코드
