styled-compoenet-사용법
2023-04-25
CSS-in-JS란?
CSS-in-JS는 스타일을 CSS 파일이 아닌 자바스크립트 코드에 CSS를 작성하는 방식이다
기존에는 HTML, CSS, javascript를 각 파일로 나누어 관리하는게 베스트였지만
React난 Vue와 같은 라이브러리들이 등장하면서
재활용 가능한 컴포넌트 단위로 분리하는 컴포넌트 단위 개발이 나오게 되고
각 컴포넌트에 HTML, CSS, javascript를 때려박는 방식이 나오게 된다
React에는 이미 jsx로 자바스크립트에 HTML을 넣는 방식이며
이에 CSS를 넣을수 있게 해주는 라이브러리들이 나오게 되는데
그 중 가장 유명한 라이브러리는 styled component다
설치 방법
기본 사용법
HTML에 스타일 적용
React 컴포넌트에 스타일 적용
Props 전달
공식문서는 class기반으로 되어있어 예시도 class 기준 이지만 component 방식의 경우 함수 밖에서 스타일을 정의 해줘야 속도가 빠르다고 한다
Props를 이용해 스타일을 가변적으로 적용 할 수 있다
true, false를 기준으로 css 동적으로 적용
style에 변수 전달
스타일 상속
styled-component로 정의된 스타일을 상속받아 재정의 할 수 있다
전역 스타일링
styled-component의 경우 기본적으로 특정 컴포넌트에만 스타일이 적용되지만
다음과 같은 방식을 사용하면 전역적으로 스타일을 적용시킬 수 있다
테마 사용
전역적으로 css를 적용할수 있다
번외 Next.js 사용중 랜더링된 후 스타일 적용 되는 문제
Next.js의 경우 hydrate 로 인해 HTML이 먼저 랜더링 된 후 Javascript가 적용 된다
따라서 CSS-in-Js 를 사용하게 될 경우 스타일이 Js에 포함 되어있기에
스타일이 나중에 적용되는 문제가 생긴다
이를 해결 하기 위해서는
바벨 플러그인 설치
.babelrc 설정
__document.tsx 설정
