[React] 컴포넌트에 CSS 적용하기

사용자와 상호작용 하는 로직과 인터페이스도 중요하지만 역시 외관이 눈에 띄고 쉬워야 이용하기 좋은 인터페이스라고 할 수 있습니다.

---

1. CSS 적용하기

우선 우리가 create-react-app을 통해 만든 리액트 프로젝트에는 App.css라는 css파일이 존재합니다. 이 파일을 열어보면 다음과 같이 구성되어있습니다.

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

 

그리고 우리가 실습을 해서 이미 사라진 App.js의 내용은 다음과 같습니다.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

 

눈치채신 분들도 계시겠지만, 컴포넌트에 스타일 적용을 위해서 className을 활용합니다. 이 클래스명에는 다음과 같은 규칙이 존재합니다.

컴포넌트 이름-클래스 이름

이렇게 하면 다른 컴포넌트에서 같은 클래스 이름을 적용하더라도 오류발생할일이 없고, 어떤 컴포넌트의 어떤 클래스를 스타일링하는지 쉽게 알 수 있게 되었습니다. 이 규칙들을 컴포넌트에 CSS를 적용하기 이전에 기억해두시고 사용하시면 됩니다.

 

그럼 실제로 한가지 예시를 들어서 적용해볼까요? 간단한 컴포넌트를 만들었습니다. div가 h1텍스트를 하나 감싸고있죠. 이들에게 className 속성을 주고 CSS에서 적용시켜보겠습니다. 당연한 이야기지만 App.js에서 css파일을 import해주어야 합니다.

import React from 'react';

const ComponentCSS = () => {
    return (
        <div className={'ComponentCSS-wrapper'}>
            <h1 className={'ComponentCSS-text'}>CSS</h1>
        </div>
    );
}

export default ComponentCSS;

.ComponentCSS-wrapper {
  background-color: #000;
}

.ComponentCSS-text {
  color: #fff;
}

어때요 깔끔하게 적용되었죠? 이렇게 컴포넌트에 CSS를 적용하는 방법을 알아보았습니다.

---

참조

https://velog.io/@velopert/react-component-styling

다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components