[React]리액트 Component에 스타일 적용하기 - Styled Component

// src/Hello.jsx

import React from "react";

function Hello() {
  return (
    <>
      <div>Hello World</div>
    </>
  );
};

export default Hello;

 

 

 

[ styled-components 패키지 사용 ]

 

 styled-components는 CSS-in-JS 라이브러리 중에서 가장 널리 사용되고 있는 라이브러리 입니다. 

 

 터미널에서 다음 명령어를 입력하여 패키지를 설치합니다. 

 

// for yarn
$ yarn add styled-components


// for npm
$ npm i styled-components

 

 스타일을 정의하실 때 작은 따옴표(' ') 아닌, 벡틱 기호(물결기호와 같은 키를 공유하는 ` `)임을 주의하세요!

기본형

(확장자는 .js 또는 .jsx) import styled from "styled-components"; export const 요소이름 = styled.HTML태그명`     // css 문법의 스타일 정의     ... `

function 컴퍼넌트이름() {     const 요소이름 = styled.HTML태그명`         // css 문법의 스타일 정의     `     return (         <>             <요소이름>내용</요소이름>         </>     ); };

 

// src/styleHello.js
import styled from 'styled-components'

export const HelloDiv = styled.div`
  background-color: skyblue;
  font-size: 30px;
`


// src/Hello.jsx
import React from "react";
import { HelloDiv } from './styleHello'

function Hello() {
  return (
    <>
      <HelloDiv>Hello World</HelloDiv>
    </>
  );
};

export default Hello;

 

 

 

 

 

[ style 속성 사용 ]

 

 HTML에서 style 속성을 사용하여 스타일을 적용하는 방법과 유사하지만, 이때 스타일은 객체 형태로 넣어줍니다. 

 

 미리 객체를 정의하여 스타일을 적용할 수도 있고, style 속성에 직접적으로 스타일을 작성하실수도 있습니다. 

 

 이때 주의점은 css 스타일 작성하실 때 하이픈 기호를 제외한 Camel Case로 작성하는 것과, 이때의 스타일 값은 문자형으로 작성하는 것을 주의하세요!

기본형

<태그 style={{ marginTop: '10px', ... }}>내용</태그>

const 스타일객체 = {     marginTop: '10px',     .... } <태그 style={스타일객체}>내용</태그>

 

 

 다음 예제는 미리 스타일 객체를 정의하여 style 속성에 지정한 코드입니다!

// src/Hello.jsx

import React from "react";
import { HelloDiv } from './styleHello'

function Hello() {
  const StyleDiv = {
    marginTop: '20px',
    backgroundColor: 'green',
  }
  return (
    <>
      <HelloDiv>Hello World</HelloDiv>
      <div style={StyleDiv}>Hello World</div>
    </>
  );
};

export default Hello;

 

 

 

 

 

[ css 파일 사용 ]

 

 우리에게 익숙한 .css 파일로 스타일을 정의한 뒤 요소에 적용할 수도 있습니다. 

 

 이때 주의할 점은 요소의 클래스를 지정할 땐, class가 아닌 className으로 지정해야합니다. 

 

/* src/Hello.css */

div {
  width: 200px;
}

.red {
  background-color: red;
  color: white;
  font-size: 20px;
}

 

// src/Hello.jsx
import React from "react";
import { HelloDiv } from './styleHello'
import './Hello.css'

function Hello() {
  const StyleDiv = {
    marginTop: '20px',
    backgroundColor: 'green',
  }
  return (
    <>
      <HelloDiv>Hello World</HelloDiv>
      <div style={StyleDiv}>Hello World</div>
      <div className="red">Hello World</div>
    </>
  );
};

export default Hello;