[리액트] styled-components로 리액트 프로젝트에 스타일링 넣기

⚠️ 이 포스팅은 김민준님의 리액트를 다루는 기술과 스파르타코딩클럽 리액트 기초반을 공부하고 정리한 블로그 포스팅입니다. ⚠️

 

포스팅에 해당하는 목차는 다음과 같습니다:

리액트를 다루는 기술: 9장 컴포넌트 스타일링

• 9.4 styled-components

리액트 기초반

• 2-8 화면을 예쁘게! - styled-components

 

---

 

styled-components란?

• 컴포넌트 스타일링 기법 중 하나로 자바스크립트 파일 안에 스타일을 선언하는 CSS-in-JS 방식
• 컴포넌트에 직접 스타일을 입히기 때문에 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만들 수 있게 해준다

 

styled components의 장점

1) 자바스크립트 파일 하나에 스타일까지 작성할 수 있기 때문에 스타일 파일을 따로 만들지 않아도 된다

2) props 값으로 전달해주는 값을 쉽게 스타일에 적용할 수 있다

3) scss를 사용할 수 있으므로 코드가 간결해진다

 

styled-components 패키지 설치하기

yarn add styled-components

 

styled-components 사용하기

1. import하기

import styled from "styled-components";

2. 스타일 컴포넌트 만들기

• 스타일 컴포넌트를 만드는 것이므로 첫글자는 반드시 대문자로 시작해야한다 (MyStyled)
• 백틱(``)안에 스타일링 코드를 넣어주었다
• MyStyled 컴포넌트안에 있는 p태그를 Scss 문법을 사용해 네스팅해주었다

import React from 'react';
import styled from 'styled-components';

const MyStyled = styled.div`
  width: 100vw;
  height: 150px;
  padding-top: 20px;
  p {
    text-align: center;
    font-size: 2em;
    font-weight: bold;
  }
`;

class App extends React.Component {
  render() {
    return (
      <MyStyled>
        <p>I am learning React!</p>
      </MyStyled>
    );
  }
}

export default App;

3. props 값 전달해주기

MyStyled 컴포넌트는 props 값으로 pink를 전달해주고 있으므로 background-color는 pink가 된다

import React from 'react';
import styled from 'styled-components';

const MyStyled = styled.div`
  width: 100vw;
  height: 150px;
  padding-top: 20px;
  background-color: ${props => props.bg_color};
  p {
    text-align: center;
    font-size: 2em;
    font-weight: bold;
  }
`;

class App extends React.Component {
  render() {
    return (
      <MyStyled bg_color={'pink'}>
        <p>I am learning React!</p>
      </MyStyled>
    );
  }
}

export default App;

4. 삼항연산자 적용해주기

MyStyled 컴포넌트의 props 값은 false이기 때문에 삼항연산자에서 green이 리턴된다. 결과적으로 background-color는 green이 된다.

import React from 'react';
import styled from 'styled-components';

const MyStyled = styled.div`
  width: 100vw;
  height: 150px;
  padding-top: 20px;
  background-color: ${props => (props.bg_color ? 'skyblue' : 'green')};
  p {
    text-align: center;
    font-size: 2em;
    font-weight: bold;
  }
`;

class App extends React.Component {
  render() {
    return (
      <MyStyled bg_color={false}>
        <p>I am learning React!</p>
      </MyStyled>
    );
  }
}

export default App;