[React] Styled-component 사용법 (이미지 넣는 법)

스타일드 컴포넌트를 사용하기 전 알고 있어야 하는 개념이 있다

 

CSS in JS

스타일을 정의 할 때 CSS파일이 아닌 Javascript로 작성된 컴포넌트에 삽입하는 스타일 기법이다

Sass와 같은 CSS 전처리기가 등장했음에도 자바스크립트의 상태 값을 공유할 수 없어서 동적으로

스타일링을 하기 위해서는 인라인 스타일을 이용하거나 css 클래스 명으로 조건부 스타일링을 이용하는 방식으로

사용하였다

 

이러한 문제를 해결 하기 위해 등장한 패러다임이 CSS in JS이다

 

설치

$ npm install styled-components

 

스타일드 컴포넌트는 스타일링을 할 때 ES6 템플릿 리터럴 문법을 이용하여 JS파일 안에 선언해서 사용한다

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

function App() {
  return (
    <HeadeTitle>Hello, react!!</HeadeTitle> // 2
  );
}

const HeadeTitle = styled.h1` // 3
  font-size: 100px;
`

export default App;

1. styled-components를 사용하려면 import 한다

2. return문 안에서 <HeadeTitle>처럼 html 태그와 유사한 형태로 컴포넌트를 만들어 선언한다

3. 

const HeadeTitle = styled.h1` // h1태그로 지정 스타일을 줌
  font-size: 100px; // 속성
`

랜더링 결과

 

스타일드 컴포넌트를 이용하여 이미지 넣는 법

import React from 'react';
import styled from 'styled-components';
import Mainimg from './assets/blue_01.jpg';

function App() {
  return (
    <MainImage />
  );
}

const MainImage = styled.div`
  width: 1000px;
  height: 1000px;
  background-image: url(${Mainimg});
  background-size: cover;
`;

export default App;