React- styled-components

※ 강의를 듣고 제가 이해한 내용을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

 styled-components

 styled-components는 CSS in JS 기술을 사용하는 라이브러리인데 그중 가장 인기가 있는 라이브러리 이다.

여기서 CSS in JS는 문구가 뜻하는 그대로 JS 안에 CSS 를 작성하는 것을 의미 한다.

1. Tagged Template Literal

const StyledDiv = styled.div`
  background: skyblue;
`;

styled-components는 코드를 작성할 때 위 코드와 같이 `을 활용한 Tagged Template Literal을 사용한다.

즉 스타일을 정의하는 속성과 값을 `으로 감싸주면 된다.

 

2. 설치

npm add styled-components 명령어로 설치해주면 된다.

 

3.  styled-components 사용

App.js

import React from 'react';
import styled from 'styled-components';
 
const Circle = styled.div` /* div를 아래 코드로 스타일링함과 동시에 해당 스타일을 가진 Circle 컴포넌트를 만듦 */
  width: 5rem;
  height: 5rem;
  background: blue;
  border-radius: 50%;
`;
 
function App() {
  return <Circle />;
}
 
export default App;

styled-components 를 사용하면 이렇게 스타일을 입력함과 동시에 해당 스타일을 가진 컴포넌트를 만들 수 있다. 만약에 div 를 스타일링 하고 싶으면 styled.div, input 을 스타일링 하고 싶으면 styled.input 이런식으로 사용하면 된다.

 

실행 결과

 

4. styled-components에 props 사용

App.js

import React from 'react';
import styled from 'styled-components';
 
const Circle = styled.div`
  width: 5rem;
  height: 5rem;
  background: ${props => props.color || 'blue'}; // props는 이렇게 템플릿 리터럴으로 받아오면 된다.
  border-radius: 50%;
`;
 
function App() {
  return <Circle color="red" />;
}
 
export default App;

위 코드에서 props로 red값을 줬기에 화면에는 빨간색 원이 나타나게 된다.

( props를 주지 않으면 파란색 )

 

실행 결과

 

5. 여러줄의 CSS 코드 조건부로 보여주기

import React from 'react';
import styled, { css } from 'styled-components'; // 조건부로 CSS를 여러개 선언하고 싶으면 이렇게 CSS를 불러와 줘야한다.
 
const Circle = styled.div` // 원을 만드는 styled-components
  width: 5rem;
  height: 5rem;
  background: ${props => props.color}; // 배경색을 props로 받아옴
  border-radius: 50%;
  ${props => // 크기 props
    props.huge &&
   css` // huge props가 전달 되면 조건부로 아래의 CSS 코드 사용
      width: 10rem;
      height: 10rem;
   `}
`;
 
function App() {
 
  return (
    <>
      <Circle color="blue" />
      <Circle color="red" huge />
    </>
  );
}
 
export default App;

이런식으로 여러 줄의 CSS 코드를 조건부로 보여주고 싶다면 css 를 사용해야한다. css 를 불러와서 사용을 해야 그 스타일 내부에서도 다른 props 를 조회 할 수 있다.