[React]Custom Component - Styled Components

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

Component Driven Development

CDD

• 부품 단위 (작은 컴포넌트)로 UI컴포넌트를 만들어 나가는 개발 방법 상향식 개발

 

CSS-in-js

• javascript에서 css를 작성하는 방식 -> css도 컴포넌트 영역으로 불러 들일 수 있게 됨

이중 대표적인 Styled-Component에 대해 집중적으로 공부하려 합니다.

 

 

Styled-Components

react를 사용하면 html요소와 js요소는 한 js파일에서 만들고 사용하여 편리하지만 css는 style sheet를 만들고, import하고 각각의 태그를 id나 class이름으로 연결을 해야했습니다. 

 

관리가 불편하다!

 

이런 불편함을 css를 컴포넌트화 시킴으로써 해결해주는 라이브러리가 있는데, react에서 사용가능한 styled components라는 라이브러리 입니다 !

 

 

Styled-Components 설치하기

 

아래 코드를 터미널에 입력하여 다운 받습니다.

$ npm install --save styled-components

 

 

Styled Components는 package.json에 다음 코드를 추가하도록 권장하고 있습니다. 아래의 코드를 추가하면 여러 버전의 Styled Components가 설치되어 발생하는 문제를 줄여줍니다.

(잘 모르겠지만, 사용중에 오류가 발생하면 다음 코드를 json에 추가하여 여러 버전의 설치를 막을수 있어 보입니다.)

 

이제 사용할 파일에서 styled components를 불러오면 준비는 끝입니다.

import styled from "styled-components"

 

Styled-Components 문법

1. 컴포넌트 만들기

기본 형식은 다음과 같습니다 !

포인트는  CSS속성을 넣어주는 부분은 백틱( ` )입니다 따옴표가 아닙니다

 

아래 코드는 styled-components 사용하여 간단한 skyblue색 버튼을 만든 코드입니다.

import styled from "styled-components";

const Button1 = styled.button`
  background-color: skyblue;
  color: black;
  
`;

export default function App() {
  return (
      <>
        <Button1>Button1</Button1>
      </>
  );
}

2. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기

 

위에서 만든 버튼코드를 가져오겠습니다

Button1은 배경색은 파란색이고, 글자는 검정입니다.

새로만들 Button2는 Button1의 속성은 가져오고, padding 10px과 margin-top 10px을 넣어 조금더 크게 만들려고 합니다.

새로 만들 Button3는 Button2의 속성을 자겨오고, 배경색을 보라색을 주려고 합니다. 

import styled from "styled-components";

const Button1 = styled.button`
  background-color: skyblue;
  color: black;
`;
const Button2 = styled(Button1)`
  background-color: skyblue;
  color: black;
  padding: 10px;
  margin-top: 10px;
`;
const Button3 = styled(Button2)`
  background-color: violet;
`;

export default function App() {
  return (
      <>
        <Button1>Button1</Button1><br/>
        <Button2>Button2</Button2><br/>
        <Button3>Button3</Button3>
      </>
  );
}

styled(변수)는 해당 변수의 태그와 속성을 받아오고 작성된 속성을 덮어씁니다.

 

3. Props 활용하기

 

Styled Component로 만든 컴포넌트도 React컴포넌트처럼  props를 내려줄수 있습니다.

내려준 props 값에 따라서 컴포넌트를 렌더링하는 것도 가능 합니다.

Styled Components는 템플릿 리터럴 문법( ${ } )을 사용하여 JavaScript 코드를 사용할 수 있습니다. props를 받아오려면 props를 인자로 받는 함수를 만들어 사용하면 됩니다.

 

1) Props로 조건부 렌더링 하기

삼항연산자로 Button컴포넌트에 skyblue라는 props가 있는지 확인하고 있으면 background color를 변경합니다.

import styled from "styled-components";

const Button = styled.button`
  background-color: ${(props)=>props.violet?"violet":"white"};

`;

export default function App() {
  return (
      <>
        <Button violet>Button</Button><br/>
        <Button >Button</Button>
      </>
  );
}

 

2) Props 값으로 렌더링하기

 

다음은 color라는 이름으로 받은 props의 값으로 배경색이 지정됨을 볼수 있습니다.

import styled from "styled-components";

const Button = styled.button`
  background-color: ${(props)=>props.color?props.color:"white"};

`;

export default function App() {
  return (
      <>
        <Button color="tomato">tomato</Button><br/>
        <Button color="skyblue">skyblue</Button><br/>
        <Button >white</Button>
      </>
  );
}

삼항연산자 말고 논리 연산자로도 다음을 구현할 수 있습니다!

import styled from "styled-components";

const Button = styled.button`
  background-color: ${(props)=>props.color||"white"};

`;

export default function App() {
  return (
      <>
        <Button color="tomato">tomato</Button><br/>
        <Button color="skyblue">skyblue</Button><br/>
        <Button >white</Button>
      </>
  );
}

 

4. 전역 스타일 설정하기

우선 전역 스타일을 성정하기 위해 styled components에서 createGlobalStyle 함수를 불러옵니다.

import { createGlobalStyle } from "styled-components";

 

스타일 컴포넌트를 만드는 것처럼 전역 스타일을 지정해줍니다

const GlobalStyle = createGlobalStyle`
  button{
    padding: 5px;
    margin: 2px;
    border-radius: 5px;
  }
`

 

만들어진 GlobalStyle컴포넌트를 최상단 컴포넌트에서 사용해주면 전역 컴포넌트가 적용됩니다.

import styled from "styled-components";
import {createGlobalStyle} from "styled-components";

const GlobalStyle = createGlobalStyle`
  button {
    padding: 5px;
    margin: 2px;
    border-radius: 5px;
  }
`

const Button = styled.button`
  background-color: ${(props) => props.color || "white"};
`;


export default function App() {
    return (
        <>
            <GlobalStyle/>
            <Button color="tomato">tomato</Button><br/>
            <Button color="skyblue">skyblue</Button><br/>
            <Button>white</Button>
        </>
    );
}