[React] React에 CSS 적용하기

React CSS 적용

리액트에 스타일을 적용하는 방법은 세 가지 방법이 존재한다.

1. 태그에 직접 지정하기

2. 일반 css파일로 적용하기

3. css모듈로 적용하기

 

1. 태그에 직접 스타일 지정하기

태그에 직접 스타일 속성을 작성하는 방법으로 스타일 속성은 객체로 주어야하며, css 속성 중 - 을 사용하지 않고 카멜표기법으로 대체해서 작성해야한다.

 

🤔 카멜표기법

단어 전체적으로 소문자를 사용하지만, 맨 첫 글자를 제외한 각 합성어의 첫 글자만 대문자로 표기하는 방식

ex) background-color -> backgroundColor,  text-align -> textAlign

 

태그에 스타일 지정하는 방법도 두 가지로 나뉜다.

1) 객체를 만들어 객체 안에 스타일 속성을 작성하고, 태그 안에서 스타일을 작성하는 대신 객체만 전달

2) 객체 생성없이 태그 안에서 바로 객체 작성

 

아래의 예시에서 두 가지 방법을 모두 활용했으니 참고하자.

 

const App = () => {

   const myStyle = {
      color: "red",
      textAlign: "center",
   }
   return(
      <Fragment>
         <header style={{backgroundColor:"palegoldenrod"}}> // 태그 안에 객체 작성
            <p style={myStyle}>헤더(직접 디자인)</p> //객체를 미리 선언 후 적용
         </header>
      </Fragment>
   )
}

 

2. 일반 CSS파일로 적용

css파일을 만들어 일반 css문법으로 디자인을 하고, css 파일을 import하여 사용하는 방법이다.

파일을 만들 때에는 반드시 컴포넌트의 이름을 포함해야 한다. (ex. App.js 에 적용시킬 css파일이면 App.css 로 생성)

 

App.css

* {
   padding: 0;
   margin: 0;
}

.app_article {
   height: 100px;
   background-color: aqua;
}

.app_header {
   height: 50px;
   line-height: 50px;
}

App.js

css 파일을 import해서 사용하며, 태그에  class 속성을 부여할 때 class로 작성하는 것이 아닌 className으로 작성해야 한다. (react에서 class 속성 부여는 className)

import { Fragment } from "react";
//CSS 파일 import
import './css/App.css';

const App = () => {
   return(
      <Fragment>
         <header style={{backgroundColor:"palegoldenrod"}} className="app_header">
            <p>헤더</p>
         </header>

         <article className="app_article">
            css파일로 디자인하기
         </article>
      </Fragment>
   )
}
export default App;

 

3. CSS 모듈 사용하여 적용

CSS 모듈은 css 를 불러와서 사용할 때 클래스 이름을 고유한 값( 파일이름_클래스이름_해시값 )으로 만들어 컴포넌트 스타일 클래스의 이름이 중첩되는 현상을 방지할 수 있다.

css 파일과 마찬가지로 컴포넌트의 이름을 포함해서 만들어야 하며 확장자는 .module.css 로 작성하고, 적용시키고자 하는 파일에서 impoort해서 사용하는데 import하면서 모듈의 이름을 선언해야 한다.

태그에 class 속성을 적용시킬 때는 className = {모듈이름.선택자} 로 작성한다. (단, 전역으로 선언하였을 경우 모듈이름 생략하고 선택자만 작성하면 된다.)

 

cf) 모듈 파일에서 선택자 앞에   :global  을 작성할 경우 전역선택자로 선언을 할 수 있다.

 

App.module.css

.app_wrap{
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: tan;
   height: 100vh;
}

.app_wrap .app_item {
   flex-basis: 20%;
   padding: 20px;
}

/* 전역선택자로 global을 앞에 작성하면 바로 적용이 가능하다. */
:global .input_control {
   display: block;
   width: 100%;
   box-sizing: border-box;
   color: tomato;
}

App.js

import { Fragment } from "react";

//CSS 모듈 import하고 모듈의 이름을 styled로 선언
import styled from './css/App.module.css'

const App = () => {
   return(
      <Fragment>
         <section className={styled.app_wrap}> //className 속성에 모듈이름. 선택자 로 작성
            <div className={styled.app_item}>
               <p>CSS디자인</p>
               //input_control은 전역 선택자로 선언하였기에 이름없이 작성한다.
               <input type="text" className ="input_control"/>
               <input type="password" className="input_control"/>
            </div>
         </section>
      </Fragment>
   )
}

export default App;