[React] 6. Styled-Components

컴포넌트가 많은경우 스타일하는데 불편한 상황이 많이생긴다 예를 들어 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/ (코딩애플님 리액트 강의)