[React] React에서 CSS 처리방법

이번포스팅은 React에서 CSS 처리방법

몇가지에대해 간단하게 알아보겠습니다.

 

---

1.인라인 스타일 적용

 

2. CSS styling 작성, Component에서 css파일 import

 

3. css-module

 

4. styled-component

---

 

※ 우선 create-react-app으로 설치한 react프로젝트인 경우 

css-loader, style-loader를 따로 설치하지 않아도 

webpack에서 사용하는 css 설정을 사용할 수 있습니다

 

- css-loader : @import, url() 등의 구문을 해석, 적용해 준다.
- style-loader : <style>태그를 통해서 CSS를 DOM에 적용해 준다.

 

 

1. 인라인 스타일 적용

 

- html 태그 안에 직접 입력하는 방법 style={ } 형식으로 입력하며, 안에는 json 형식으로 속성명:'속성값' 으로 입력합니다.

 

import React from 'react';

const Main = () => {
	return (
		<>
			<h3 style={{ color: "red",backgroundColor: "magenta"}}>
            	Hello World!
            	</h3>
		</>
	);
};

 

 

- 인라인 스타일 적용은 가장 높은 우선순위를 갖습니다.

 

---

2. CSS styling 작성, Component에서 css파일 import

 

별도의 파일에 스타일을 정의해놓고, React 컴포넌트 파일에서 해당 CSS 파일을 임포트하여 사용할 수 있습니다.

그 다음, 엘리먼트의 className 속성을 이용해서 외부 파일에 정의된 스타일을 맵핑시켜주면 됩니다.

 

하지만 위와같은 방법으로 진행하게 된다면 , 의도치 않게 중복 적용이 되거나 css class 명이

충돌하는 경우가 발생합니다. 이를 효과적으로 해결하려면 CSS module을 사용하시면 됩니다.

 

3. CSS module

 

css-module을 이용하면 클래스명이 충돌하는 단점을 해결 할 수 있고,

컴포넌트 단위로 스타일을 적용할 수 있다.

사용방법 ::

문법 : {모듈명}.module.css (꼭 모듈명과 같아야 하는건 아니지만, 같게 작성하는 것이 좋다.)
import 방법 : import style from "./모듈명.module.css";
적용 방법 : {style.클래스명}

 

 

EX)

 

1) Main.module.css

 

.name_box {
	color : yellow; 
	background-color : black;
}

 

 

2) Main.jsx

 

import React from 'react';
import style from "./Main.module.css";
const Main = () => {
	return (
		<>
			<h3 className={style.name_box}>Hello World?!</h3>
		</>
    );
};

 

3) App.module.css

 

.name_box {
	color : white; 
	background-color : blue;
}

 

 

4) App.jsx

 

import React, { Component } from 'react';
import Main from './Main';
import style from "./App.module.css";

const App = () => {
	return (
		<div>
			<Main />
			<h3 className={style.name_box}>Helllllo World~!</h3>
		</div>
	);
}
export default App;

 

 

실행화면에는 같은 .name_box인데 개발자도구를 켜서 확인해보면 각각의 hash가

적용되어있을것입니다.

 

---

4. styled-component

 

마지막으로 styled-component입니다.  CSS in JS 라고도 불리며 이 문구가 뜻하는 그대로,

이 기술은 JS 안에 CSS 를 작성하는 것을 의미합니다.

 

사용하기전에 npm install styled-component 진행합니다.

기본적으로 html의 모든 태그들에 스타일을 적용할 수 있습니다.

적용 방법은 styled.tagName과 같이 작성한 뒤,

적용하고자 하는 CSS 스타일을 작성하면 됩니다!

 

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

const Div = styled.div`
    background: ${(props) => (props.background === 'blue' ? 'blue' : 'yellow')};
`

const Button = styled.button`
    display: inline-flex;
    width: ${(props) => props.size + `px`};
    padding: 7px 14px;
    justify-content: center;
    align-items: center;
    background: #000;
    color: #fff;
    font-weight: bold;
    border: none;
    outline: none;

    &:hover {
        background: #666;
    }
`

const Style = () => {
    return (
        <>
            <Div background="red">Hello!!!</Div>
            <Button size="300">버튼!</Button>
        </>
    )
}

export default Style

 

 

Styled Components에서는 확장성을 고려하여 

props를 통해 각각의 컴포넌트마다 원하는 속성을 적용할 수 있게 해줍니다.

 

<Div background='red'>Hello!!!</Div> 를 통해 props의 background값을 red를

전달하였고 , 그 값을 통해 삼항연산자를 통하여 적용시켜주었습니다.

 

<Button size='300'>버튼!</Button> 을 통해 props의 size값을 300 전달하였고,

버튼의 넓이를 설정해주었습니다.

 

가상선택자 적용방법은 &:hover를 통해 진행하였습니다.

( 선택자 방식이 두가지가 있지만 이게 눈에 잘띄어서 사용하였습니다 )

 

---

감사합ㄴㅣ다..