오늘은 무엇을 했는가?
Styled Components
- 스타일드 컴포넌트란?
대표적인 CSS-in-JS 라이브러리로 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법
Template Literal(` `,$,{}를 사용하여 표현식을 표기하는 방법)을 사용해 스타일을 지정할수 있고, 동적으로 props를 내려받아 사용도 가능
- 선정 이유?
1) 별도의 CSS 파일 만들 필요가 없어 파일 관리가 용이함.
2) 파일명, 클래스네임명 등 고민의 시간이 줄어든다.
3) 해당 컴포넌트에서 수정 하기 때문에 파일 이동이 적어 작업이 편하다.
4) export하여 재사용 할 수도 있다.
- 설치하기
자바스크립트
npm i styled-components
타입스크립트
npm i --save-dev @types/styled-components
- 사용 예제
참고한 블로그
버튼 만들기 예제
import React from 'react';
import styled, { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
body {
margin: 50px;
padding: 50px;
background-color: black;
}
`;
const Container = styled.div`
background-color: lightgray;
width: 100%;
height: 100vh;
`;
const Button = styled.button`
color: white;
min-width: 120px;
background-color: ${(props) => props.color || 'blue'};
&:hover {
background-color: white;
color: black;
}
& + button {
margin-left: 1rem;
}
`;
export default function App() {
return (
<Container>
<GlobalStyle />
<Button>버튼1</Button>
<Button color='red'>버튼2</Button>
</Container>
);
}
오늘 힘든 점은 무엇인가?
내일은 무엇을 해야 하나?