구현하는 기능과 배우는 컨셉
✔ styled-components
✔ props styling
✔ node-sass
✔ nesting 문법
✔ @import 문법 & extend 문법
✔ @mixin/@include
👉 styled-components
import styled from 'styled-components';
let box = styled.div`
padding : 10px;
`;
let title = styled.h4`
font-size : 25px;
`;
function Detail(){
return (
<div>
<HTML 많은 곳/>
<box>
<title>안녕하세요</title>
</box>
</div>
)
}◾ yarn add styled-components 설치
◾ 해당 컴포넌트에 import styled from 'styled-components'
◾ 컴포넌트를 만들때 스타일을 미리 주입해서 만들 수 있다.
◾ div box를 하나 만들고 싶으면 styled.div를 사용한다. 이때 백틱안에 css문법작성
◾ 그리고 변수에 저장해서 원하는곳에 컴포넌트로 작성하면 된다.
◾ 이때 주의할점은 yarn, babel 등 버전확인과 react 라이브러리가 제대로 설치되었는지 확인해야한다
◾ npx browserslist --update-db
👉 props Styling
let title = styled.h4`
font-size : 25px;
color : ${ props => props.color };
`;
function Detail(){
return (
<div>
<박스>
< title color="blue">안녕하세요1</title>
< title color={'red'}>안녕하세요2</title>
</박스>
</div>
)
}◾ title h4에 color style 작성
◾ color에 props => props.color
◾ props.color라는 props변수를 여기에 집어넣음
◾ 그냥 ${props.color}가아니라 콜백함수로 넣어야함
◾ props를 미리 설정해놓은 부분에 원하는 문자를 전송할 수있다
👉 node-sass
◾ yarn add node-sass 설치
◾ 해당 컴포넌트에 scss file을 import한다.
변수사용
(Detail.scss)
$MainColor : #ff0000;
.red {
color : $MainColor;
}◾ $변수명 : 집어넣을값
◾ 이렇게 변수를 만들고 원하는 곳에서 사용가능
◾ 색상,px,%등등 다집어넣는다
nesting
div.container {
h4 {
color : blue;
}
p {
color : green;
}
}◾ {}안에 부모노드의 자식노드들을 작성해서 보다 더 간편하게 작성가능하다.
@extends
.alert {
background : #eeeeee;
padding : 15px;
}
.my-alert2 {
@extend .alert;
background : red;
}◾ alert 들어있던 모든 내용들을 복사해서 사용하게해준다
◾ 재사용하기가 용이하다
@mixin / @include
@mixin good() {
background : #eeeeee;
padding : 15px;
}
.alert {
@include good()
}
◾ mixin은 그냥 함수만드는 문법
◾ 재사용일때 많이사용
◾ 함수하나만들어놓으면 어디서든지 적용해서 사용가능
◾ 적용해서 사용할때 include를 꼭 같이 적어줘야한다
