- 스타일드 컴포넌트(Styled-Components)
- SASS(SCSS)
- 둘의 차이점
1. Styled-Components
스타일드 컴포넌트란?
동일한 컴포넌트에서 컴포넌트 이름을 쓰듯 스타일을 지정하는 것
css 파일을 밖에 두지 않고, 컴포넌트 내부에 넣기 때문에 css가 전역으로 중첩되지 않도록 해주는 장점이 있다.
CRA 파일에서 터미널을 열어 yarn add styled-components 명령어 입력 -> 설치 후 사용한다.!
스타일드 컴포넌트 만들기
const 컴포넌트명 = styled.태그명- 만들고자 하는 컴포넌트의 render 함수 밖에서 만든다.
- 선택자의 유효범위를 백틱(``)으로 구분한다.
스타일 컴포넌트 상속
const 컴포넌트명 = styled.(상속받을)스타일컴포넌트명- 기존에 있는 스타일 컴포넌트를 상속받아 재사용한다.
스타일 컴포넌트 장점
- props로 전달해주는 값을 쉽게 스타일에 적용할 수 있다. -> 굳이 여러개의 클래스를 만들 필요가 없다.
- styled-component는 내부적으로 props를 받을 수 있고, 그 props에 따라 스타일을 변경할 수 있다.
- 예제
const Title = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
const Wrapper = styled.section`
padding: 4em;
background: papayawhip;
`;
<Wrapper>
<Title>
Hello World!
</Title>
</Wrapper>
);- 상속 예제
const Button = styled.button`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
const TomatoButton = styled(Button)`
color: red;
border-color: red;
`;
render(
<div>
<Button>Normal Button</Button>
<TomatoButton>Tomato Button</TomatoButton>
</div>
);Button 컴포넌트를 상속받아 TomatoButton 이라는 새로운 컴포넌트를 만든다.
- props 예제
const App = () => (
<Wrapper>
<Box bgColor="red" />
<Box bgColor="green" />
</Wrapper>
);const Box = styled.div`
width: 100px;
height: 100px;
background-color: ${(props) => props.bgColor};
`;${(props) => props.bgColor}; 으로 props에서 값을 불러와 스타일을 적용시킨다.
2. SASS(SCSS)
SASS란?
Syntactically Awesome Style Sheets의 약자로, CSS 코드를 더 효율적으로 작성하기 위한 언어
- CSS의 단점 보완: 코드수정 및 재사용이 용이하다.
- CSS 전처리기: CSS가 동작하기 전에 사용하는 기능이다.
SCSS?
CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 CSS의 상위집합으로 CSS와 거의 같은 문법으로 SASS 기능을 지원한다.
SASS는 선택자의 유효범위를 '들여쓰기'로 구분하고, SCSS는 {}로 범위를 구분한다.
[예제]
// 변수 선언을 해서 사용할 수 있다.
// 상수처럼 사용할 수 있다.
$zeroPX: 0px;
$white: #fff;
$mainBlue: #598fba;
$mainRed: #ff8787;해당 변수를 원하는 곳에 대입해서 사용할 수 있다.
.flexText {
top: $zeroPX;
left: $zeroPX;
padding: $zeroPX;
margin: $zeroPX;
width: 100%;
height: 200%;
background: $mainBlue;
color: $white;
}변수뿐만 아니라 @for 반복문, @if 조건문 같은 흐름제어문이나 내장함수, 믹스인 등 다양한 문법들도 사용할 수 있다.
- 중첩 예제
label {
padding: 3% 0px;
width: 100%;
cursor: pointer;
color: $colorPoint;
&:hover {
color: white;
background-color: $color;
}
}선택자를 중첩하거나 속성을 중첩시켜 상위 요소를 참조하는 것이 가능하다.
Styled-components와 SCSS의 차이점
Styled-component
- css in js 방식으로 컴포넌트가 렌더링 될 때만 해당 스타일 정보를 읽는다.
-> 동적인 이벤트가 많은 사이트라면 컴포넌트가 자주 렌더링 될 때 그만큼 스타일 정보도 다시 읽어와야 한다. - 컴포넌트의 props를 참조할 수 있으며, props의 값에 따라 스타일을 다르게 코딩할 수 있다.
SCSS
- css in css 문법으로 js 파일과는 분리되어 있다.
-> 어떤 컴포넌트의 상태값이 변하더라도 이에 반응하기 쉽지않으며, 처음에 렌더링 되는 과정에서 브라우저에 보이지 않는 컴포넌트까지 웹문서의 스타일 정보로 읽히기 때문에 불필요한 컴파일 과정이 추가된다. - 전처리기를 위한 도구가 필요하다.
- class명을 하나하나 정해주어야 한다.
