안녕하세요. O612 입니다.
이번 편은 Devil Styled Sheets 4번째 글입니다. 상속 개념에 대해서 지식을 가지고 있지 않은 상태에서는 따라가기 힘들 수도 있습니다.
이 글은 미리 작성하여 예약을 걸어둔 글입니다.
Image Assets
emotion styled로는 import로 image를 불러와서 쓸 수 있습니다. image는 2가지 방식으로 불러와서 쓸 수 있는데 /src/assets/index.js 파일을 만들어 관리합니다.
index.js 파일로 image object 관리
// /src/assets/index.js
export const images = {
icons: {
instagram: require('./images/icons/instagram.svg'),
...,
},
backgrounds: {
primaryHeader: require('./images/backgrounds/primary-header.png'),
...,
},
}
export default {};코드에 있는 icons는 디렉토리입니다. next.js 기반이라면 용량이 작은 이미지라면 컴파일시 자동으로 base64 코드로 직접 스타일 파일에 들어갑니다. 이름은 camelCase로 작성합니다.
// .jsx emotion
import { images } from '../../assets';
const Primary = styled.div({
width: '100%',
height: '2rem',
background: `url(${images.icons.instagram}) no-repeat 50% 50%/contain`,
});
import로 개별 불러와서 사용
import IconInstagram from '../../assets/images/icons/instagram.svg';
const Primary = styled.div({
width: '100%',
height: '2rem',
background: `url(${IconInstagram}) no-repeat 50% 50%/contain`,
});
이 경우는 추천하지 않습니다. 이미지 파일명을 종종 변경해야 할 때가 있는데 이 경우 일일이 사용된 import 를 찾아서 수정해줘야 하기 때문에 object 형태로 만들어 관리하는 것을 추천합니다.
sass는 object로 관리는 안되고 기존의 스타일 방식인 url 방식으로만 불러올 수 있습니다.
Inherit (상속)
스타일은 상속 개념이 있습니다. 상속에 따라 적용 순서가 달라집니다.
emotion styled는 1단계 상속이고, Sass로는 선택자에 따라 레벨 상속이 달라집니다(CSS 마찬가지). 그래서 클래스 상속을 받은 상태라면 Sass에서 적용한 코드가 emotion styled로 작성한 코드보다 우선 적용되어 emotion styled로 작성한 코드는 취소 됩니다.
그래서 뭐가 좋다는 거야?!
emotion styled는 jsx에 직접 작성하는 코드라서 styled 안의 코드가 변경되면 브라우저에서는 해당 영역이 다시 리렌더링됩니다. 이것도 단점이라면 단점일 수 있겠네요.
하지만 image assets 관리가 편하기 때문에 필자는 최소한 background image 불러올 때는 무조건 emotion styled로 작성합니다. emotion styled는 props에 따라 스타일 관리도 편하기 때문에 이것도 emotion styled의 장점이라 할 수 있겠네요.
이번 편은 클래스 상속 개념을 이미 알고 있지 않다면 이해하기 힘든 글입니다. 상속 개념에 대해서는 기회가 된다면 다뤄보겠습니다.
FIN.
O612님의 창작활동을 응원하고 싶으세요?
