안녕하세요.
오늘은 React로 개발할 때, 스타일링을 편하게 할 수 있는 방법에 대해 알아보겠습니다.
평소 저희는 .js나 .jsx파일에 로직을 구현하고,
별도의 css파일을 만들어 이를 import했죠.
이 경우, 두 개 이상의 파일을 교차하며 개발해야 하기에 불편함이 따르죠.
css-in-js라 불리는 여러 기법들을 사용하면,
jsx파일 내에서 별도의 css파일 없이 css 스타일링을 적용할 수 있습니다.
css-in-js를 사용하지 않은 일반적인 경우
다음은 CSS-in-JS를 사용하지 않은 일반적인 경우의 모습입니다.
import './index.css';
<div className="container">
<h1>전통적인 방식</h1>
</div>css파일을 불러오고, 스타일을 적용하고 싶은 html태그에 className속성을 주어
css파일에 생성해둔 스타일을 적용해줬죠.
이렇게 두 개의 파일을 오가며 개발하는 것이 불편하다면, 아래의 이야기에 집중해주세요!
CSS-in-JS 01. JS 객체 활용
css를 자바스크립트 객체 형식으로 표현하면, jsx 내부에서 css를 사용할 수 있습니다.
아래는 예제 코드입니다.
export default const MenuBar = () => {
const menuStyle = {
backgroundColor: "white",
border: "2px solid black",
margin: "2px 1px 1px 3px",
}
return(
<div style={menuStyle}>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
)
}menuStyle이라는 객체에 css스타일을 작성해주고,
이를 div태그의 style속성에 전달해주면 됩니다.
주의할 점은, 객체 안에 css를 작성해줄 땐, css의 속성명을 케밥케이스가 아닌 카멜케이스로 작성해줘야 한다는 것입니다.
border-top이 아닌, borderTop이 되어야겠죠?
또, 속성명과 속성값도 자바스크립트 객체의 key-value형식으로 작성해주시면 됩니다.
속성값은 따옴표에 감싸주세요!
CSS-in-JS 02. styled-components
저의 경우 프로젝트에서 이 친구를 가장 많이 사용했습니다.
styled-components는 별도의 설치가 필요합니다.
라이브러리 설치
터미널에 다음과 같이 입력해주세요
npm install styled-components만약 타입스크립트로 프로젝트를 진행하신다면,
타입 정의를 위해 아래의 작업도 함께 진행해주세요.
npm install @types/styled-components자! 모든 준비가 끝났다면, 바로 시작해봅시다.
코드 예제
위의 JS객체를 이용한 스타일링에서 살펴봤던 아래의 예제코드를 styled-components방식으로 바꿔보겠습니다.
상기를 위해 앞서 살펴봤던 코드를 다시 불러와봅시다
export default const MenuBar = () => {
const menuStyle = {
backgroundColor: "white",
border: "2px solid black.",
margin: "2px 1px 1px 3px",
}
return(
<div style={menuStyle}>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
)
}이제 이 친구를 styled-components라이브러리를 이용해 수정해보겠습니다.
아래는 수정된 코드입니다.
import styled from 'styled-components';
const MenuStyle = styled.div`
background-color: white;
border: 2px solid black;
margin: 2px 1px 1px 3px;
`;
export default function MenuBar() {
return(
<MenuStyle>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</MenuStyle>
)}자 우선, styled-components는 별도로 설치한 라이브러리니까,
당연히 import를 해줘야 사용할 수 있는데요,
import styled from 'styled-components';styled라는 녀석엔 여러 html태그들이 들어있습니다.
styled.div라고 입력하면, 컴파일러는 JSX내에 있더라도, html의 div태그를 의미함을 알아챌 수 있습니다.
const MenuStyle = styled.div`
background-color: white;
border: 2px solid black;
margin: 2px 1px 1px 3px;
`;이렇게 상수 형식으로 스타일을 직접 생성할 수 있습니다.
MenuStyle이란 이름은 제가 만든 하나의 태그로서,
제가 지정한 스타일을 그대로 적용받은 HTML의 div태그가 되는 것입니다.
스타일을 작성할 땐, 백틱 표시를 하고 써주셔야 합니다!
또, 위에서 살펴본 자바스크립트 객체를 사용했을 때완 달리,
"-" 를 사용하는 기존 css의 케밥 케이스 네이밍 룰을 그대로 따릅니다.
속성값을 적을 때도 따옴표 없이 그냥 써줍니다.
<MenuStyle>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</MenuStyle>이렇게, MenuStyle태그로 감싸주면 완성입니다.
다시 말하지만, 여기서의 MenuStyle태그는 "저만의 스타일을 장착한 div태그" 입니다!
마무리
이렇게 오늘은 별도의 스타일링 파일을 따로 만들지 않고,
작업중인 JSX파일 내에서 한 번에 요소에 스타일을 적용시키는 방법들을 살펴봤습니다.
자바스크립트 파일 안에서 css를 사용한다 하여
위의 방식들을 css-in-js라고 부릅니다.
살펴본 기법들 외에도, 무수히 많은 css-in-js방식들이 있으니,
궁금하신 분들은 찾아보시면 좋을 것 같습니다.
감사합니다!
