티스토리 뷰
Styled Components
- Styled Components는 React와 함께 사용하는 CSS in JS 라이브러리 중 하나입니다.
- JavaScript 파일 안에서 CSS를 작성하며 태그의 스타일 속성을 사용하지 않고 React 컴포넌트와 함께 컴포넌트 단위로 스타일을 관리할 수 있습니다.
- 때문에 CSS와 JavaScript를 분리하지 않아도 되므로, 유지보수성과 코드 가독성이 높아집니다.
- CSS 변수, 조건문, 반복문 등의 기능을 사용할 수 있어, 동적으로 스타일을 변경할 수 있고, 컴포넌트 스타일링을 위해 전용 문법을 사용합니다.
- 그러나 기존 CSS 파일을 사용하지 않으므로 초기 로딩 시간이 증가할 수 있으며, 브라우저 캐시 기능을 활용할 수 없습니다.
Styled Components 설치와 설정
npm install --save styled-components
- 터미널에서 위의 명령어를 입력하여 설치하고, 문제를 줄이기 위해 package.json에 아래 코드를 추가한다.
{
"resolutions": {
"styled-components": "^5"
}
}
- 이후 js파일에 import를 한다.
import styled from "styled-components"
Styled Components 문법
- Styled Components는 먼저 컴포넌트를 선언하고, styled.태그` ` 를 할당한다.
- ``(백틱)안에 css의 속성과 값을 선언하면, 해당 컴포넌트는 선언한 css를 갖게 된다.
const BlueButton = styled.button` //BlueButton컴포넌트는 button이고, ``안의 css를 갖는다.
background-color: blue;
color: white;
`;
export default function App() {
// React 컴포넌트를 사용하듯이 사용하면 됩니다.
return <BlueButton>Blue Button</BlueButton>;
}
- 또한, 태그대신 컴포넌트를 ()안에 넣어서 css를 재활용할 수 있다.
const BlueButton = styled.button` //BlueButton컴포넌트는 button이고, ``안의 css를 갖는다.
background-color: blue;
color: white;
`;
const BigBlueButton = styled(BlueButton)`
padding: 10px;
margin-top: 10px;
`;
//재활용한 컴포넌트를 재활용할 수도 있습니다.
const BigRedButton = styled(BigBlueButton)`
background-color: red;
`;
export default function App() {
return (
<>
<BlueButton>Blue Button</BlueButton>
<br />
<BigBlueButton>Big Blue Button</BigBlueButton>
<br />
<BigRedButton>Big Red Button</BigRedButton>
</>
);
}
Props 사용하기
- Styled Components에서 react처럼 props를 사용할 수 있습니다. 이때 ${}안에서 작성한다. ${}안에서 js문법이 사용가능하기에 조건부로 렌더링 하는 것이 가능합니다.
- Styled Components에는 특이한 문법이 있는데, 그 중 &는 현재의 요소를 의미하며, hover등에서 사용가능하다.
import styled from "styled-components";
import GlobalStyle from "./GlobalStyle";
//받아온 prop 값을 그대로 이용해 렌더링할 수도 있습니다
const Button1 = styled.button`
background: ${(props) => (props.color ? props.color : "white")};
`;
//다음과 같은 형식으로도 활용할 수 있습니다.
const Button2 = styled.button`
background: ${(props) => props.color || "white"};
&:hover {
background-color: ${(props) => props.primary ? 'navy' : 'gray'};
color: white;
}
`;
export default function App() {
return (
<>
<GlobalStyle />
<Button1>Button1</Button1>
<Button1 color="orange">Button1</Button1>
<Button1 color="tomato">Button1</Button1>
<br />
<Button2>Button2</Button2>
<Button2 color="pink">Button2</Button2>
<Button2 color="turquoise">Button2</Button2>
</>
);
}
- 추가로 전역스타일을 선언하는 것도 가능하다. 우선 아래의 createGlobalStyle를 import한다.
import { createGlobalStyle } from "styled-components";
- 그 후, 전역 스타일을 할당할 컴포넌트를 선언하고, 해당 컴포넌트를 최상위 컴포넌트에서 사용해 주면 전역에 스타일이 적용된다.
const GlobalStyle = createGlobalStyle`
button {
padding : 5px;
margin : 2px;
border-radius : 5px;
}
`
function App() {
return (
<>
<GlobalStyle />
<Button>전역 스타일 적용하기</Button>
</>
);
}
'개발 > HTML,CSS' 카테고리의 다른 글
웹 표준 (0) | 2023.04.25 |
---|---|
storybook (0) | 2023.04.19 |
Component Driven Development (0) | 2023.04.18 |
grid (0) | 2023.03.06 |
css 초기화 세팅 (0) | 2023.02.16 |
댓글