[엘리스트랙 11주차] React에 스타일 적용하기

React에 스타일을 적용하는 법을 배웠다.

처음에 이걸 배운다고 했을 때 그냥 CSS 파일 따로 만들어서 쓰면 되는 거 아냐? 라고만 생각했었는데,
생각보다 여러 방법이 있었고 듣기만 해봤었던 Scss와 styled-components의 사용법에 대해서도 알 수 있었다.

 

우선 첫 번째로는 흔하게 사용하는 방법이다.

저번에 강의를 보면서 작성했던 투두리스트 프로젝트에 스타일을 적용하는 식으로 배운 것을 정리해보려고 한다.

1. CSS 파일 분리

CSS 파일 분리

 

결과물

제일 익숙한 방법이다.

이 외형을 바꾸지 않은 채로 Scss와 styled-components를 적용해볼 것이다.

 

2. Scss 

• CSS 전처리기
• Scss로 작성된 파일은 컴파일을 통해 CSS 파일로 변환
• 모듈, 믹스인, Nested Style, 변수, 조건문, 반복문 사용 가능

믹스인 사용

중복되는 스타일 속성은 믹스인으로 정의해 재사용할 수 있다.

.form-button {
  flex: 1;

  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.form-button + .form-button {
  margin-left: 12px;
}

.submit-button {
  background-color: #000;
}

.reset-button {
  border: 1px solid #e6e6e6;

  background-color: #fff;

  color: #000;
}

 

기존 CSS 파일이다. 등록 버튼과 초기화 버튼은 배경 색상과 폰트 색상만 다르고 그 외의 스타일은 비슷하다.

참고로 모듈 설치는 해줘야 한다.

// 믹스인은 함수 형태로, 함수 인자를 넘겨 받을 수도 있다.
@mixin form-button() {
  flex: 1;

  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.form-button + .form-button {
  margin-left: 12px;
}

.submit-button {
  @include form-button(); // 믹스인 적용 방법
  background-color: #000;
}

.reset-button {
  @include form-button();
  border: 1px solid #e6e6e6;

  background-color: #fff;

  color: #000;
}

 

Nested Style

.form-button + .form-button {
  margin-left: 12px;
}

 

해당 스타일은 버튼 사이에 간격을 주기 위해 작성했었는데

이걸 제출 버튼 사이에 넣어서 Nested Style을 적용해보려고 한다. 

@mixin form-button() {
  flex: 1;

  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.submit-button {
  @include form-button();
  background-color: #000;

  & + button { // &는 자기자신을 나타내는 placeholder이다
    margin-left: 12px;
  }
}

.reset-button {
  @include form-button();
  border: 1px solid #e6e6e6;

  background-color: #fff;

  color: #000;
}

 

변수

변수는 앞에 $기호를 붙인다.

$color-white: #fff;

.reset-button {
  @include form-button();
  border: 1px solid #e6e6e6;

  background-color: $color-white;

  color: #000;
}

 

강의를 들으면서 Scss와 PostCSS의 차이 또한 궁금해져서 찾아봤다.

PostCSS는 CSS Postprocessor(후처리기)로 자바스크립트 플러그인을 사용해 CSS를 변환하는 도구이다.

PostCSS는 필요한 플러그인만 포함해 사용이 가능하며, Scss 처럼 별도로 학습해야 하는 문법은 없다.

그러나 Scss에 비해 강력한 문법을 제공하진 않으며, 필요한 플러그인을 직접 찾아 조립해야 한다. 

또, 사용하던 중 플러그인의 지원이 중단될 수 있다.

 

PostCSS 플러그인 

 

CSS Colorguard

GitHub - SlexAxton/css-colorguard: Keep a watchful eye on your css colors.

CSS의 색 유사도를 계산하는 플러그인

 

Stylelint

GitHub - stylelint/stylelint: A mighty CSS linter that helps you avoid errors and enforce conventions.

CSS의 문법을 검사해주는 플러그인

 

PostCSS Nested

GitHub - postcss/postcss-nested: PostCSS plugin to unwrap nested rules like how Sass does it.

Scss의 Nested Style과 비슷하다.

 

Autoprefixer

GitHub - postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use

CSS 속성에 자동으로 prefix(-mz-, -webkit-)를 붙여주는 플러그인. 

 

3. Styled Components

많은 기업에서 사용하고 있다

 

Styled Components는 CSS-in-JS 중 가장 널리 사용되는 라이브러리이다. CSS-in-JS는 CSS 스타일을 CSS 파일로 따로 분리해 적용하지 않고 자바스크립트 파일 안에서 바로 삽입해 사용하는 스타일 기법이다. 그 중 styled components는 스타일이 적용된 요소를 컴포넌트처럼 작성할 수 있어 코드를 작성하는 입장에선 편할 것 같다.

장점	단점
컴포넌트 형태로, 재사용이 가능함	다른 스크립트 파일을 작성하면 코드를 다시 작성해야 함
타입 검사 가능	일반 컴포넌트와 styled components의 구별이 어려움
ThemeProvider로 CSS 통일감을 줄 수 있음	런타임 시 컴파일되어 성능 문제 야기 가능성
클래스 명을 지을 필요가 없음	여러 플러그인이 필요할 수 있음
SSR 지원 (장점일까?)	전역 스타일링(HTML, body 등) 시 CSS 모듈을 함께 사용하는데, 복잡해질 가능성 있음

 

npm install styled-components
yarn add styled-components

 

 

참고로 모듈 설치가 필요하다.

import { useRef } from "react";
import { useState } from "react";

import styled, { css } from "styled-components";

const InsertForm = ({ onInsert }) => {
  const [inputValue, setInputValue] = useState("");
  const inputRef = useRef();

  const handleSubmit = (event) => {
    event.preventDefault();
    if (typeof onInsert === "function" && inputValue !== "") {
      onInsert(inputValue);
    }
    setInputValue("");
    inputRef.current.focus();
  };

  return (
    <FormContainer onSubmit={handleSubmit}>
      <TodoInput
        ref={inputRef}
        value={inputValue}
        onChange={(event) => {
          setInputValue(event.target.value);
        }}
      />
      <FormButtonContainer>
        <FormButton type="submit" sort="submit"> //컴포넌트에 props를 넘겨주는 방식과 같다.
          등록
        </FormButton>
        <FormButton type="button" sort="reset">
          초기화
        </FormButton>
      </FormButtonContainer>
    </FormContainer>
  );
};

// CSS를 정의해 다른 styled components에서 사용할 수도 있다.
const submitButton = css`
  background-color: #000;

  & + button {
    margin-left: 12px;
  }
`;

const resetButton = css`
  border: 1px solid #e6e6e6;

  background-color: #fff;

  color: #000;
`;

const FormContainer = styled.form`
  width: 320px;

  display: flex;
  flex-direction: column;
`;

const TodoInput = styled.input`
  height: 52px;

  padding: 12px;
  margin-bottom: 12px;

  border: none;
  border-radius: 12px;

  background-color: #f8f8f8;

  font-size: 16px;

  outline: none;
  box-sizing: border-box;
`;

const FormButtonContainer = styled.div`
  display: flex;
  flex-direction: row;
`;

const FormButton = styled.button`
  flex: 1;

  font-size: 16px;
  font-weight: 700;

  color: #fff;

  ${({ sort }) => sort === "reset" && resetButton}
  ${({ sort }) => sort === "submit" && submitButton}
`;

export { InsertForm };

 

이렇게 보니 정말 일반 컴포넌트와 구분하기 어렵겠다는 생각을 했다. 

개인적으로 코드가 길어져서 보기 힘들지 않나 라는 생각도 약간 있는데
그래도 많이 쓰는 데에는... 이유가 있을 것이라고 생각한다.
아마 쓰다보면 익숙해지지 않을까? Scss도 적용 가능한 건 좋은 것 같다. 

 

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript