📋 styled-components
컴포넌트 이름을 쓰듯 스타일을 지정하는 것을 의미한다.
css파일을 별도로 두지 않고 컴포넌트 내부에 넣기 때문에 css가 중첩되는 경우를 방지할 수 있다.
styled-components 설치
node package manager를 통해 관리되는 패키지이므로 npm 명령어를 통해 설치할 수 있다.
npm i styled-components성공적으로 설치가 되면 package.json에 추가된 것을 확인할 수 있다.
styled-components 사용법
styled-components를 사용하기 위해선 설치한 패키지에서 styled를 import 해주어야 한다.
import {styled} from "styled-components";임포트한 styled 뒤에 html 태그명을 작성하면 해당 태그에 대한 스타일을 지정할 수 있는 것이다.
기본 문법은 아래와 같다.
백틱 내부에 해당 태그에 지정할 css를 작성하면 된다.
const 컴포넌트 스타일 명 = styled.html 태그명` css 코드 `;여러 스타일 컴포넌트를 작성할 때 동일한 css가 있다면 스타일 컴포넌트를 상속받아 사용할 수 있다.
작성한 스타일 컴포넌트는 일반 컴포넌트와 동일하게 렌더링 해주면 된다.
- 예시1
const Wrapper = styled.div`
display : flex;
`
const Rect = styled.div`
width: 200px;
height: 200px;
background-color: yellowgreen;
margin : 15rem auto;
const App = () => {
return (
<Wrapper>
<Rect />
</Wrapper>
)
}
props 활용
색상만 다른 두 컴포넌트가 있다고 가정해보자.
색상 이외엔 css 코드가 모두 중복되기에 배경색만 전달해주면 되지 않을까?
styled components는 props를 통해 원하는 속성을 적용할 수 있다.
props로 필요한 속성만 전달해줌으로써 코드의 간결함과 재사용성이 증가하였다.
const Wrapper = styled.div`
display : flex;
`;
const Rect = styled.div`
width: 200px;
height: 200px;
margin : 15rem auto;
background-color: ${(props) => props.bgColor};
`;
const App = () => {
return (
<Wrapper>
<Rect bgColor="green"/>
<Rect bgColor="pink"/>
</Wrapper>
)
}
상속
동일한 컴포넌트에 특정 속성만 추가되어야 한다면 상속이라는 개념을 사용할 수 있다.
한 컴포넌트를 상속받아 필요한 코드만 추가해주면 되는 것이다.
다만 스타일 컴포넌트 기본 작성방법이 아닌 styled() 괄호 내부에 상속받을 컴포넌트 명을 작성해줘야 한다.
이 또한 코드의 간결함과 재사용성을 증가시킬 수 있다.
const Wrapper = styled.div`
display : flex;
`
const Rect = styled.div`
width: 200px;
height: 200px;
background-color: ${(props) => props.bgColor};
margin : 15rem auto;
`;
const Cirl = styled(Rect)`
border-radius: 100px;
`
const App = () => {
return (
<Wrapper>
<Rect bgColor="yellowgreen" />
<Cirl bgColor="pink" />
</Wrapper>
)
}
as
as 속성은 동일한 스타일 컴포넌트를 사용하되 렌더링되었을 때의 html 태그를 지정해줄 수 있다.
사용법은 아래 코드처럼 컴포넌트에 렌더링되고자 하는 html 태그를 지정해주면 된다.
가져온 컴포넌트의 스타일만 참조하고 태그명은 작성한대로 렌더링 되는 것이다.
const App = () => {
return (
<Wrapper>
<Rect bgColor="yellowgreen" />
<Cirl bgColor="pink" />
<Cirl as="button" bgColor="pink" />
<Cirl as="h1" bgColor="pink" />
</Wrapper>
)
}지정해준 태그대로 렌더링 되는 것을 확인할 수 있다.
attrs
특정 태그가 갖는 고유한 특성을 미리 부여할 수 있다.
사용법은 아래 코드처럼 styled.태그명.atts({}) 중괄호 내부에 key-value 형식으로 작성해주어야 한다.
const IptBox = styled.input.attrs({name : "input tag"})`
width: 10rem;
height: 3rem;
padding: 1rem;
`;
const App = () => {
return (
<Wrapper>
<IptBox />
<IptBox />
<IptBox />
</Wrapper>
)
}고유값으로 부여한 속성은 해당 컴포넌트에 모두 부여된다.
애니메이션
애니메이션 css를 사용하기 위해선 styled-components 라이브러리의 keyframes를 Import 해주어야 한다.
사용법은 css의 애니메이션과 동일하며 애니메이션은 스타일 컴포넌트보다 먼저 작성되어야 한다.
- 사각형에서 원으로 변해가는 애니메이션 예시
const Anim = keyframes`
0% {
border-radius : 0;
}
100% {
border-radius: 100px;
background-color: pink;
}
`
const Rect = styled.div`
width : 200px;
height: 200px;
margin: 15rem auto;
background-color: ${(props) => props.bgColor};
animation: ${Anim} linear 3s infinite;
`
const App = () => {
return (
<Wrapper>
<Rect bgColor="yellow" />
</Wrapper>
)
}Pseudo selectors
가상 선택자라고 불리며 style components 안에 있는 컴포넌트를 선택할 수 있다.
스타일 컴포넌트 태그 내부에 p태그가 있다고 가정해보자
const Wrapper = styled.div`
display : flex;
`
const Rect = styled.div`
width : 200px;
height: 200px;
margin: 15rem auto;
display: flex;
justify-content: center;
align-items: center;
background-color: ${(props) => props.bgColor};
span {
font-size: 3rem;
background-color: pink;
}
`
const App = () => {
return (
<Wrapper>
<Rect bgColor="yellow">
<span>💩</span>
</Rect>
</Wrapper>
)
}
화면의 특정 요소에 커서가 향했을 때 특정 디자인을 입혀주는 등 어떤 요소에 동적인 스타일을 입혀주는 가상선택자의 특징을 인지하고 hover 선택자를 사용해보자
const Wrapper = styled.div`
display : flex;
`
const Rect = styled.div`
width : 200px;
height: 200px;
margin: 15rem auto;
display: flex;
justify-content: center;
align-items: center;
background-color: ${(props) => props.bgColor};
span {
font-size: 3rem;
background-color: pink;
&:hover {
font-size: 5rem;
background-color: blue;
border-radius: 100%;
}
}
`
const App = () => {
return (
<Wrapper>
<Rect bgColor="yellow">
<span>💩</span>
</Rect>
</Wrapper>
)
}자기 자신을 의미하는 & 선택자를 사용해 자식 태그에 hover가 부여된것과 같은 효과를 낼 수 있다.
참고
