[React]React 프로젝트에 CSS 적용하는 방법(Nomad Coders 강의 정리)

Nomad Coders 강의는 예전에 들었었는데 노션에 정리한 내용을 블로그에도 정리하면 좋을 것 같아서 복습 겸 정리를 해보았다.

 

React 프로젝트에 CSS를 적용하는 방식에는 직접 CSS를 적용하는 방식, module.css를 사용하는 방식, styled-components를 사용하는 방식 등이 있다.

 

1. 직접 CSS를 적용하는 방식

가장 단순한 방식인데, hover 등의 이벤트 등을 적용할 수 없다.

function Header(){
    return(<div style={{backgroundColor: "skyblue", width: "100%", height: 72}}>
        Header
    </div>)
}

 

2. module.css를 사용하는 방식

내가 프로젝트를 진행할 때 가장 많이 사용하는 방식이다. 파일이름.module.css라는 이름을 가진 파일을 만들고 styles를 불러와 사용한다.

*Header.tsx 파일

import styles from "./Header.module.css";

function Header(){
    return(<div className={styles.header__container}>
        Header
    </div>)
}

*Header.module.css 파일

.header__container{
    background-color: skyblue;
    width: 100%;
    height: 72px;
}

 

module.css를 사용하면 className을 랜덤하게 만들어줘서 프로젝트 내에서 className이 겹치는 것을 걱정하지 않아도 된다.

 

3. styled-components를 사용하는 방식

styled-components를 사용하기 위해서 styled-components를 먼저 설치하자

✨설치

npm i styled-components

*Typescript로 프로젝트를 진행하는 경우

npm i styled-components
npm install --save-dev @types/styled-components

 

styled-components 문법은 다음과 같다. 주의해야할 점은 작은 따옴표가 아니라 "백틱"을 사용해야 한다.

import styled from "styled-components";

const Header = styled.div`
    background-color: skyblue;
    width: 100%;
    height: 72px;
`;

function MainPage() {
    return (
        <div>
            <Header>
                Header
            </Header>
        </div>
    )
}

 

🔎styled-components에서 컴포넌트를 확장성 있게 사용하는 방법

1. 상속

import styled from "styled-components";

const Header = styled.div`
    width: 100%;
    height: 72px;
`;
const BlueHeader = styled(Header)`
    background-color: "skyblue";
`;
const PinkHeader = styled(Header)`
    background-color: "pink";
`;

function MainPage() {
    return (
        <div>
            <BlueHeader />
            <PinkHeader />
        </div>
    )
}

2. props를 이용해 컴포넌트에 값 전달하기

import styled from "styled-components";

interface IHeader{
    backgroundColor: string;
}
const Header = styled.div<IHeader>`
    background-color: ${props=>props.backgroundColor};
    width: 100%;
    height: 72px;
`;

function MainPage() {
    return (
        <div>
            <Header backgroundColor="skyblue" />
            <Header backgroundColor="pink" />
        </div>
    )
}

3. HTML tag를 바꾸는 'As', 속성 값을 설정하는 'Attrs'

styled-components에서 'As'를 통해서 HTML tag의 이름을 바꿀 수 있다.

<Header as="a" backgroundColor="skyblue">
	Header
</Header>

'Attrs'를 통해서는 HTML 태그 내의 속성값을 지정할 수 있게 한다.

const Input = styled.input.attrs({required: true, maxLength: 30})``;

function MainPage() {
    return (
        <div>
            <Input/>
        </div>
    )
}

 

*styled-components에서 animation 적용하기

const HeaderAnimation = keyframes`
    from{
        transform: translateY(20px);
    }
    to{
        transform: translateX(-20px);
    }
`;
const Header = styled.div`
    width: 100%;
    height: 72px;
    animation: ${HeaderAnimation} 1s linear infinite;
`;

function MainPage() {
    return (
        <div>
            <Header>
                Hello
            </Header>
        </div>
    )
}