React) 컴포넌트 스타일링① - 일반 CSS 방식

안녕하세요, 코린이의 코딩 학습기 채니 입니다.
[리액트를 다루는 기술]의 책을 참고하여 포스팅한 개인 공부 내용입니다.

 

컴포넌트 스타일링

 

일반 CSS (가장 흔한 방식)

- CSS 클래스를 중복되지 않게 만드는 것이 중요

 

중복되지 않게 하기 위해 클래스 명을 특별한 규칙을 사용하여 짓거나, CSS Selector를 이용합니다.

 

새로운 프로젝트를 생성하여 App.js와 App.css를 살펴보겠습니다.

 

App.js

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

function App() {
  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;

 

App.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);
  }
}

 

이름 짓는 규칙

 

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

- 클래스 이름을 '컴포넌트 이름-클래스' 형태로 지어 다른 컴포넌트와 중복되지 않게 해줍니다.

 

② BEM 네이밍

- 일종의 규칙을 준수하여 해당 클래스가 어디에 어떤 용도로 사용되는 지 명확하게 작성해줍니다.

(ex. .card_title-primary)

 

CSS Selector

 

CSS 클래스가 특정 클래스 내부에 있는 경우에만 스타일 적용!

만일, .App 안에 있는 .logo에 스타일 적용을 원한다면 아래와 같이 작성합니다.

.App .logo {
    animation: App-logo-spin infinite 20s linear;
    height: 40vmin;
}

 

기존 App.css와 APp.js의 CSS 클래스 부분을 CSS Selector를 이용하여 재작성해보겠습니다.

 

App.js

function App() {
  return (
    <div className="App"> // 이 부분 수정
      <header>
        <img src={logo} className="logo" alt="logo" /> // 이 부분 수정
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a // 이 부분 수정
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
        
        ...
        ...

 

App.css

/* .App 안에 들어있는 .logo*/
.App .logo {
  height: 40vmin;
  pointer-events: none;
}

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

/* 
  .App 안에 들어 있는 header
  이 때 header 클래스가 아니라 header 태그 자체에 스타일 적용하므로 .이 생략
*/
.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 안에 있는 a 태그 */
.App-link {
  color: #61dafb;
}

이처럼 클래스 이름이 불필요한 부분을 생략해줄 수도 있습니다.