React Style 적용

노마드코더로 리액트를 공부하다가 리액트에 스타일을 적용하는 다양한 방법들을 정리해두면 좋을 것 같아서 포스팅합니다. (이 강의는 멤버십으로 유료강의입니다.)

방법1. CSS파일 작성

style.css와 같은 파일들을 만들어서 컴포넌트에 아래와 같이 추가합니다.

import "./style.css";

• css가 global로 동작하기 때문에 class 이름을 기억해야함(중복❌)

방법2. CSS 모듈

className을 임의화해서 css가 global이 아니라 local로 동작하도록 하겠습니다.
css파일의 이름을 style.module.css와 같이 생성합니다. (create-react-app 덕분에 ...module.css 가능)

자바스크립트 파일을 추가하듯이 컴포넌트에 아래와 같이 css파일을 추가합니다.

import styles from "./style.module.css"

css를 작성합니다.

.title{color:'red';}

컴포넌트에 className을 사용해서 css를 추가합니다.

<h1 className={styles.title}>hello</h1>

• 개발자도구에서 확인 시 클래스이름 뒤에 임의로 뒷부분이 생성된 것을 확인 가능
• className 기억 필요(중복❌)
• 인스타그램에 적용된 방식
• className에 '-' 사용불가

방법3. styled-components👍

강의에서 매우매우 강조하며 추천한 방식입니다.

styled-components 모듈을 설치합니다.

yarn add styled-components

아래와 같이 import 합니다.

import styled from "styled-components";

backticks(`)을 사용해서 스타일을 추가합니다.

const List = styled.ul`
	display:flex;
	&:hover{
		background-color:blue;
	}
`

const Item = styled.li`
	color:gray;
`

스타일이 입혀진 컴포넌트를 return 합니다.

<List>
	<Item>항목1</Item>
	<Item>항목2</Item>
</List>

방법3-1. styled-components를 Global하게!

위의 방법3은 styled-components를 local하게 작업했습니다. 이를 Global하게 사용하는 방법은 아래와 같습니다.

styled-reset 모듈을 설치합니다.

yarn add styled-reset

위 모듈은 styled-components를 초기화해서 0의 상태에서 시작하도록 합니다.

Global로 관리할 js파일을 생성합니다. (예제 : GlobalStyle.js로 생성)
다음과 같이 코드를 추가합니다.

import { createGlobalStyle } from "styled-components";
import reset from "styled-reset";

const globalStyles = createGlobalStyle`
    ${reset};
    a{
        text-decoration:none;
        color:inherit;
    }
    *{
        box-sizing:border-box;
    }
    body{
        font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size:12px;
        background-color:rgba(20, 20, 20, 1);
        color:white;
        padding-top:50px;
    }
`;

export default globalStyles;

가장 상위의 컴포넌트에 import, render에 추가합니다.

//가장 상위의 컴포넌트
import GlobalStyles from "./globalStyles";
...
render(){
  return (
  	<>
    	...
    	<GlobalStyles />
    </>
  )
}

위와같이 react 프로젝트에 스타일을 추가하는 다양한 방법들을 알아보았습니다.
저는 이 강의에서 가장 추천하지 않는 별도의 css파일 생성 후 import해서 전역으로 사용하는 방법을 주로 사용했는데, 강의를 통해서 위와같은 다양한 방법을 배웠습니다. 이 포스팅 후에 styled-components에 대해 더 공부해서 추가 포스팅을 할 예정입니다🤨