TIL DAY 220
오늘 배운 일
React : Styled-Components 1탄
React 에서 스타일을 적용하는 방법은 여러가지 있지만, 이번에는...
styled-components 기술을 활용해서 보다 편하게 리액트를 꾸며보자!
간단한 styled-compoents 코드를 보면
예 )
App.js
import styled from "styled-components";
const Button = styled.button`
background-color: #ededed;
border: none;
border-radius: 8px;
`;
export default function App() {
return (
<div>
<h1>안녕 Styled Components!</h1>
<Button>확인</Button>
</div>
);
}
사용방식은 간단하다!
리액트 프로젝트를 생성해주고, styled-components 를 설치해준다.
$ npm install styled-components그리고 import 를 해준다.
import styled from "styled-components";Styled-Components의 default import 로 styled 를 가져오면 됩니다. 대부분의 작업은 styled 함수를 사용한다.
위의 코드를 참고하면, Button 이라는 변수는 React 의 컴포넌트이다. 일반적인 CSS 코드랑 다르게, 컴포넌트를 만들어서 사용을 한다. Styled-Components 는 컴포넌트 중심으로 스타일을 지정하는 방식은 편리할 뿐만 아니라, 개발 속도도 빠르게 향상된다.
그럼 이제 실제 우리의 프로젝트를 만들어보자!
$ npx create-react-app 이름명그리고 styled-components 를 설치해주고 따로 Button.js 이라는 파일을 만들어준다.
src/Button.js
import styled from 'styled-components';
const Button = styled.button`
background-color: #6750a4;
border: none;
color: #ffffff;
padding: 16px;
`;
export default Button;src/App.js
import Button from './Button';
function App() {
return (
<div>
<Button>리액트 짱!</Button>
</div>
);
}
export default App;실제 화면을 확인해보면...
다음으로 Styled Components 에서 지원하는 Nesting 문법에 대해 알아보겠다!
Nesting 이란?
- CSS 규칙 안에서 CSS 규칙을 만드는 걸 말하는데, 활용하는 두 가지 방법은 바로
& 선택자와 컴포넌트 선택자에 대해 알아보겠다.
& 선택자
해당 선택자를 사용해서 컴포넌트를 호버하거나 클릭했을 때 배경색이 바뀌도록 만들어보겠다.
Button.js
import styled from "styled-components";
const Button = styled.button`
background-color: #6750a4;
border: none;
color: #ffffff;
padding: 16px;
&:hover,
&:active {
background-color: #463770;
}
`;
export default Button;Nesting에서 &는 부모 선택자를 의미한다. 위의 코드 같은 경우에는, 버튼 컴포넌트의 클래스를 말하는 것이다. 기존의 CSS 에서는, hover 나 active 를 쓸려면...
.Button:hover 또는 .Button:active 를 쓰면 되었는데, 여기서는 &:hover 또는 &:active 라고 작성한다.
컴포넌트 선택자
Styled Components에선 클래스 이름을 쓰지 않는데, 그러면 컴포넌트 안에 또 다른 컴포넌트를 선택하고 싶다면 어떻게 할까?
버튼 안에 아이콘을 배치하는 예를 들어보면...
Styled Components 로 Icon 이라는 컴포넌트와 StyledButton 컴포넌트를 각각 만들어주고, StyeldButton 안에 Icon을 배치해준다.
이 때, 중요한 점은 StyledButton 컴포넌트 안에서 Icon 컴포넌트를 선택해 별도로
margin-right: 4px라는 속성을 지정하는게 키 포인트!
이럴 경우, 컴포넌트 선택자로 쓰고 싶을 때는 ${Icon} 같이 부모 컴포넌트 리터럴 안에 넣어준다.
Button.js
import styled from "styled-components";
import nailImg from "./nail.png";
const Icon = styled.img`
width: 16px;
height: 16px;
`;
const StyledButton = styled.button`
background-color: #6750a4;
border: none;
color: #ffffff;
padding: 16px;
${Icon} {
margin-right: 4px;
}
&:hover,
&:active {
background-color: #463770;
}
`;
function Button({ children, ...buttonProps }) {
return (
<StyledButton {...buttonProps}>
<Icon src={nailImg} alt="nail icon" />
{children}
</StyledButton>
);
}
export default Button;
아이콘은 밑에 이미지를 따로 저장해두면 된다.
CSS 에서 접근하려면 이렇게 작성했을 것이다...
.StyledButton .Icon {
margin-right: 4px;
}참고로 Nesting 은 여러 겹으로 할 수 있는데, 밑에 코드처럼 활용이 가능하다.
&:hover,
&:active {
background-color: #7760b4;
${Icon} {
opacity: 0.2;
}
}
참고로...
Button 컴포넌트 안에 파라미터로, children 과 buttonProps 를 구조분해해서 불러왔는데, children props 를 쓰면은, 우리가 App 에서 작성한 문구를 불러올 수 있다.
그리고 ...buttonProps 는 rest parameter 인데, Button 이 받아오는 모든 props 를 뜻한다.
끝으로 :
- 오늘은 React 에서 빼놓을 수 없는 styled-components 를 알아보았다.
- 확실히 따로 CSS 를 작성하는 것보다, 편리하고 가독성이 좋다.
