초기설정

eslint
자바스크립트 문법의 에러를 찾아서 표시해주는 도구를 말한다. 우리가 원하는 특정한 규칙을 설정하면, 해당 규칙에 어긋나는 경우에 대해서도 표시를 해준다.
prettier
특정한 코드 스타일로의 통일을 위해서 코드 포매팅을 도와주는 도구를 말한다. 탭의 크기나 세미콜론의 사용 여부 등에 대해서 모든 코드를 통일시켜줄 수 있다.

CRA에서 eslint가 이미 설치되어있어서 prettier와 eslint-config-prettier만 설치한다.
eslint-config-prettier는 eslint와 prettier의 충돌을 해결해준다.

컴포넌트 스타일 적용

App.css

컴포넌트는 각각 관리하기 위함인데 중복된 클래스명을 가질시 컴포넌트 서로 스타일이 적용이 되는 부작용이 있다. 스타일이 상속되기 때문에 충돌을 야기할 수 있어 불편하고 권장되지 않는다.

sass

yarn add node-sass 설치를 한다.
styles 폴더를 따로 만들어주고 scss 파일들을 이곳에서 관리해준다. 마치 vue로 작업할때 scss폴더와 같다.

import '../styles/Button.scss'

function Button({ size }) {
  return (
    <button className={`Button ${size}`}>
      <p>버튼</p>
    </button>
  )
}

컴포넌트 하나로 props를 활용해서 다른 크기의 버튼을 만들어본다.

scss 문법

.Button {
  &.large {
  }
  &.medium {
  }
  &.small {
  }
  &.tomato {
    background-color: tomato;
  }

  &.orange {
    background-color: orange;
  }

  &.yellowgreen {
    background-color: yellowgreen;
  }
}

app.js

function App() {
  return (
    <div>
      <p className="main_text">HI</p>
      <StyleTest />
      <Button size="large" color="tomato" />
      <Button size="medium" color="orange" />
      <Button size="small" color="yellowgreen" />
    </div>
  )
}

필요한 요소를 새로만들지 않아도 스타일 커스텀을 통해서 재활용할 수 있는것이 큰 장점이다.

css module

어떤 컴포넌트에서 불러오는지에 따라서 다른 고유값이 class 이름에 부여된다. 컴포넌트 마다 고유한 스타일로서 적용이 되는 것이고, 수업 초반에 봤던 것과 같은 상황은 일어나지 않게 된다. 그리고 css-loader 가 필요한데, cra 로 리액트 프로젝트를 만들면 기본적으로 설정이 되있다.

style 파일 이름.module.css을 만든다.
컴포넌트에서 임포트 해준다.

<button className={style.Button}>
  <p>버튼</p>
</button>

앞에 클래스 이름에 style을 붙여줘야한다.

styled-components

스타일이 이미 적용된 컴포넌트를 미리 만들어 놓고 이것을 가져와서 필요한 컴포넌트에서 사용을 한다. 가장 많이 쓰이는 방식이다.

스타일과 컴포넌트를 각각 작성해서 변수명을 exprot하고 해당 컴포넌트에서 import를 하는 방식이다.

컴포넌트마다 폴더를 만들어준다.

1. style.js
2. index.jsx

컴포넌트 폴더 안에 파일 2개 만들어준다.

style.js

import styled from 'styled-components'

export const Button = styled.button`
  color: white;
`

index.jsx

import * as S from './style'

function Button({ size, color }) {
  return (
    <S.Button>
      <p>버튼</p>
    </S.Button>
  )
}

앞에 S.을 붙이는 건 다른 import된 컴포넌트와의 구분을 갖기 위해서고 styled component임을 알아챌수 있도록 하기 위함이다.

props로 커스텀하기

import styled from 'styled-components'

export const Button = styled.button`
  background-color: ${({ isClicked }) => (isClicked ? 'royalblue' : 'tomato')};
`

function Button({ size, color }) {
  return (
    <S.Button isClicked={true} color="tomato">
      <p>버튼</p>
    </S.Button>
  )
}

themeprovider 전역에서 쓰기

themeprovider 는 앱 전체에서 공통된 스타일 값을 쓸 수 있도록 도와주는 역할을 담당합니다. 보통 앱 마다 특정한 색상 팔레트를 정해놓고 해당 팔레트 안에서 요소들의 색을 지정하게 되는데요, 그래서 그러한 색상을 미리 통일시켜놓고, 해당 색상만을 사용하도록 하는 것이죠!

// 전역에서 사용할 변수 스타일 styles/theme.js에 작성

const palette = {
  orange: '#FFA500',
  black: '#000000',
}

const common = {
  flexCenter: `
    display: flex;
    justify-contents: center;
    align-items: center;
  `,
}

const fontSizes = {
  title: '2rem',
  subtitle: '1.5rem',
  paragraph: '1rem',
}

const theme = {
  palette,
  common,
  fontSizes,
}

export default theme

적용 방법

import styled from 'styled-components'

export const Button = styled.button`

  ${(props) => props.theme.common.flexCenter}

  background-color: ${(props) => props.theme.palette.orange};
`

코드가 훨씬 깔끔해지고 정리되보인다.

Keyframe 활용

animation을 만들기 위해서는 import styled, { keyframes } from 'styled-components'을 import 해준다.

import styled, { keyframes } from 'styled-components'

const fadeIn = keyframes`
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
`

export const Button = styled.button`
  outline: none;
  border: none;

  ${({ theme }) => theme.common.flexCenter}

  background-color: ${({ theme }) => theme.palette.orange};

  border-radius: 10px;
  color: white;
  width: 100px;

  margin: 10px;
  &:hover {
    opacity: 0.5;
  }

  animation-name: ${fadeIn};
  animation-duration: 1s;
  animation-timing-function: ease-out;
`

styled-component를 활용해서 버튼이 서서히 나타나는 애니메이션을 구현할 수 있다.

globalstyle로 전역폰트 적용

src/styles 폴더는 전역 속성의 style파일들이 담겨있다.

1. assets 폰트 폴더에 폰트 파일을 저장한다.
2. styles 폴더에 globalstyle.js를 만든다.

globalstyle.js에 적용할 폰트를 불러온다.

import { createGlobalStyle } from 'styled-components'
import NotoSansBold from '../assets/fonts/NotoSansKR-Bold.otf'

export default createGlobalStyle`
    @font-face {
        font-family: "NotoSansBold";
        src: url(${NotoSansBold}) format('opentype');
    }
`

app.js에 적용한다.

import { ThemeProvider } from 'styled-components'
import theme from './styles/theme'
import Button from './components/Button'
import GlobalStyle from './styles/globalStyle'

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Button />
    </ThemeProvider>
  )
}

export default App

적용된 폰트가 필요한 컴포넌트는 font-family: 'NotoSansBold';를 써주면 된다.