컴포넌트가 많은경우 스타일하는데 불편한 상황이 많이생긴다 예를 들어 class명이 중복 되거나 원치않는 곳에 스타일 적용되는 등
스타일의 편리함을 위해 styled-components 라이브러리가 존재한다
라이브러리 설치 : 터미널 창에 yarn add styled-components
import styled from "styled-components";
설치가 완료되었다면 원하는 곳에 import해준다
styled-components를 이용해 div 박스를 하나 만들어보자
let Box = styled.div`
padding: 20px;
`;
css를 입힌 컴포넌트를 하나 만든다고 생각하면 된다
앞서 import한 styled.원하는 태그명
div 박스를 만들것이기 때문에 styled.div로 작성하고 `` 안에 기본 스타일을 다 넣어주면 된다
return (
<div className="container">
<Box>dfdfdffd</Box>
.
.
.
마지막으로 원하는곳에 컴포넌트처럼 삽입해주면 끝!!!
실제로 패딩이 20px인 div박스 하나가 잘 들어가있다
let Box = styled.div`
padding: 20px;
`;
let Title = styled.h4`
font-size: 25px;
`;
return (
<div className="container">
<Box>
<Title>Detail</Title>
</Box>
.
.
.
styled-components안에 또 다른 컴포넌트를 넣는것도 가능하다
비슷한 ui가 몇개 더 필요한경우에도 styled-components를 편리하게 사용가능
색깔만 다른 제목이 여러개 필요하다면? - props를 이용하자
let Title = styled.h4`
font-size: 25px;
color: ${(props) => props.titleColor};
`;
titleColor라는 props를 받아올 것이다
return (
<div className="container">
<Box>
<Title titleColor={"red"}>Detail</Title>
</Box>
.
.
.
원하는 컴포넌트에서 일반적인 props 전달하는것과 동일하게 red값을 보내주었다
보낼 이름이 변수 명이 아니라 일반 문자이면 ""안에 넣어줘도 ㄱㅊ!!!
return (
<div className="container">
<Box>
<Title titleColor="red">Detail</Title>
</Box>
.
.
.
스타일이 잘 적용 되었다
return (
<div className="container">
<Box>
<Title titleColor={"red"}>제목1</Title>
<Title titleColor={"green"}>제목2</Title>
<Title titleColor={"blue"}>제목3</Title>
<Title titleColor={"orange"}>제목4</Title>
</Box>
.
.
.
style 재활용이 가능해졌다
출처 : https://codingapple.com/ (코딩애플님 리액트 강의)