CSS-in-JS는 JavaScript 파일 안에서 직접 스타일을 정의하고 적용하는 방식입니다.
window.onload = () => {
// .css-13lenlh 처럼 랜덤한 이름의 CSS를 JS로 만들어 놓고, 해당 이름을 리턴하여 CSS_철수의버튼에 저장
// 자바스크립트 조건문, 반복문, 변수 등을 CSS에서 사용 가능(장점: SCSS 등의 새로운 문법이 아닌 JS 문법으로 사용 가능)
const CSS_철수의버튼 = window.emotion.css`
background-color: blue;
color: white;
`;
document.getElementById("HTML_네모상자").innerHTML = `<button class=${CSS_철수의버튼}>클릭하세요</button>`
}
JavaScript 객체로 스타일을 정의하고, 컴포넌트에 직접 적용합니다. 이 방식의 장점은 다음과 같습니다:
Styled Components와 Emotion은 CSS-in-JS 방식을 구현한 대표적인 라이브러리입니다. 두 라이브러리는 JavaScript 내부에서 CSS 스타일을 선언하고 컴포넌트에 적용할 수 있도록 도와줍니다. 두 라이브러리는 매우 비슷한 역할을 하지만, 약간의 차이도 있습니다. 각각의 라이브러리가 무엇인지, 어떻게 동작하는지 살펴볼게요.
Styled Components는 CSS-in-JS 방식을 구현하는 대표적인 라이브러리 중 하나로, CSS 스타일을 JavaScript에서 정의합니다. 이를 통해 스타일이 JavaScript 코드와 함께 관리되며, 각 요소에 자동으로 고유한 클래스 이름을 부여합니다.
window.onload = () => {
const CSS_철수의버튼 = window.styled.button`
background-color: blue;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
`;
document.getElementById("HTML_네모상자").innerHTML = `<button class=${CSS_철수의버튼}>클릭하세요</button>`
}
CSS 문법과 유사: 스타일을 JavaScript에서 정의하지만, CSS와 거의 같은 문법을 사용하므로 기존 CSS 문법에 익숙한 사람들에게 적응하기 쉽습니다.
자동 클래스 네이밍: 각 요소에 고유한 클래스 이름을 자동으로 부여하여 클래스 이름 충돌을 방지합니다. 이로 인해 동일한 클래스 이름을 여러 곳에서 사용해도 스타일이 서로 겹치지 않습니다.
동적 스타일링: JavaScript 변수를 사용하여 조건에 따라 스타일을 변경할 수 있습니다.
const Button = styled.button`
background-color: ${props => props.primary ? 'blue' : 'gray'};
`;
CSS 모듈화: 컴포넌트 단위로 스타일을 관리할 수 있어 재사용성과 유지보수성이 높아집니다.