[Main] React CSS 적용하는 3가지 방법

안녕하세요 현고미 입니다!
이번에는 React에서 CSS를 적용하는 방법에 대해 알아보겠습니다.

React는 컴포넌트 기반의 라이브러리로, 각 컴포넌트마다 독립적인 스타일을 적용할 수 있습니다.
CSS를 적용하는 방법은 크게 세 가지가 있습니다.

 

1) CSS파일을 생성해서 적용하는 방법

첫 번째는 일반적인 방법인 CSS 파일을 만들고, import 문으로 컴포넌트에 불러오는 방법입니다.

예를 들어, App.js라는 컴포넌트에 App.css라는 스타일 파일을 적용하고 싶다면, 다음과 같이 작성할 수 있습니다.

 

[App.js]

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>React에서 Css 적용하기</h1>
    </div>
  );
}

export default App;

 

[App.css]

.App {
  background-color: #f0f0f0;
  text-align: center;
}

.App h1 {
  color: #333;
  font-size: 2rem;
}

 

2) CSS-in-JS 방법

두 번째는 Css-in-Js라고 불리는 방법으로, 자바스크립트 파일 안에 스타일을 작성하는 방법입니다.

이 방법의 장점은 스타일을 동적으로 변경할 수 있고, 스코프 충돌을 방지할 수 있다는 점입니다. 

예를 들어, styled-components라는 라이브러리를 사용한다면, 다음과 같이 작성할 수 있습니다.

import React from 'react';
import styled from 'styled-components';

const App = styled.div`
  background-color: #f0f0f0;
  text-align: center;
`;

const Title = styled.h1`
  color: #333;
  font-size: 2rem;
`;

function App() {
  return (
    <App>
      <Title>React에서 Css 적용하기</Title>
    </App>
  );
}

export default App;

 

3) 인라인 스타일 사용 방법

인라인 스타일을 사용하는 방법입니다.

이 방법은 간단한 스타일을 적용할 때 유용하며, 자바스크립트 객체로 스타일을 정의하고, style 속성으로 컴포넌트에 전달합니다. 자바스크립트 객체로 활용하면서 함수 형태로 스타일을 적용할 수 있습니다.

예를 들어, 다음과 같이 작성할 수 있습니다.

 

import React, {Component} from "react";
import "./App.css";
export default class App extends Component {
  btnStyle = {
    color: "#ffffff",
    border: "none",
    padding: "5px 9px",
    borderRadius: "50%",
    cursor: "pointer",
    float: "right"
  }

  getStyle = () => {
    return {
      padding: "10px",
      borderBottom: "1px dotted #ccc",
      textDecoration: "none"
    }
  }
  render () {
    return(
      <div className="container">
        <div className="todoBlock">
          <div className="title">
            <h1>할 일 목록</h1>
          </div>
          <div style={this.getStyle()}>
            <input type="checkbox" defaultChecked={false}/>
            <span>공부하기</span>
            <button style={this.btnStyle}>X</button>
          </div>
        </div>
      </div>
    )
  }
}

 

 

이상으로 React에서 Css를 적용하는 세 가지 방법에 대해 알아보았습니다.
각 방법의 장단점을 고려하여 상황에 맞게 사용하시기 바랍니다. 감사합니다.

 

오늘도 긴 글 읽어주셔서 감사합니다 ^^

-현고미 올림-