React style적용

1. 스타일 시트
2. inline -> 동적 사용
3. CSS in JS

1. 스타일 시트

• Box.css

.box{
    width:100px;
    height:100px;
    background-color:red;
}

• index.js

import './Box.css'

const Box = () => {
  return <div className="box"></div>
}

export default Box

• App.js

import Box from './components/Box'

function App() {
  return (
    <div className="App">
      <Box></Box>
    </div>
  );
}

box style을 import하여 사용

2. inline

• Box.css

.box{
    width:100px;
    height:100px;
    background-color:red;
}

• index.js

import './Box.css'

const Box = ({bgColor}) => {
  return <div className="box" style={{backgroundColor : bgColor}}></div>
}

export default Box

• App.js

import logo from './logo.svg';
import './App.css';
import Box from './components/Box'

function App() {
  return (
    <div className="App">
      <Box bgColor="yellow"></Box>
    </div>
  );
}

export default App;

App.js의 bgColor를 이용해서 스타일을 적용

3. CSS In JS

1) @emotion/react
2) craco 사용하기

1) @emotion/react

• npm i @emotion/react 명령어 실행 후에 적용시킨다.
  아래는 예시로 SomeComponent에 color를 적용시킨 예시이다.

• App.js

import logo from './logo.svg';
import './App.css';
import Box from './components/Box'

// /** @jsxImportSource @emotion/react */
import { jsx, css } from '@emotion/react'

const style = css`
  color: hotpink;
`

const SomeComponent = ({ children }) => (
  <div css={style}>
    Some hotpink text.
    {children}
  </div>
)


function App() {
  return (
    <div className="App">
      <SomeComponent></SomeComponent>
      <Box bgColor="yellow"></Box>
    </div>
  );
}

export default App;

• 주의 : /** @jsxImportSource @emotion/react */부분이 위에 적용되어야한다.

2) craco 사용

• yarn add -D @craco/craco 명령어 후에
  package.json의 "start": "react-scripts start",도
  "start": "craco start"로 변경

• craco.config.js 파일 추가

module.exports = {
  babel : {
    "presets": ["@emotion/babel-preset-css-prop"]
  }
}

• yarn add -D @emotion/babel-preset-css-prop 명령어 실행

3) styled 사용

• yarn add @emotion/styled

• index.js

import styled from "@emotion/styled"

const Box = styled.div`
  width:100px;
  height:100px;
  background-color:cyan;
`

export default Box;

• App.js

import Box from './components/Box/index.js'

function App() {
  return (
    <div>
      <Box></Box>
    </div>
  );
}

export default App;

styled를 이용하여 cyan 색깔의 정사각형을 만들었다.