[React] 리액트를 사용하여 간단한 노트 앱 만들기 #02 스타일 적용 방식 변경하기

 

#01 노트 앱 만들기

https://yeongseungjeong.tistory.com/80

[React] 리액트를 사용하여 간단한 노트 앱 만들기 #01

 

 

이전에 노트 앱을 만들 때 CSS Modules 방법으로 스타일 적용을 했었다

className의 고유성과 유지보수에 용이하다는 장점이 있지만

리액트 개발자들이 많이 사용하는 styled-components도 직접 써보고 편리한 방법으로 사용해 보고 싶어서

 

기존 css-modules 방식으로 작성된 스타일들을 styled-components를 사용해 바꿔 보려고 한다.

 

---

 

1. 컴포넌트 내부에 작성

CSS Modules

// Title.module.css
.title {
    margin-bottom: 1.5rem;
}

.title_header {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
}

// Title.js
import styles from "./Title.module.css";

const Title = () => {
    return (
        <div className={styles.title}>
            <h3 className={styles.title_header}>Note</h3>
            <p>Take your notes</p>
        </div>
    );
};

 

Styled Components

// Title.js
import styled from "styled-components";

const Header = styled.div`
    margin-bottom: 1.5rem;
    h3 {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.3rem;
    }
`;

const Title = () => {
    return (
        <Header>
            <h3>Note</h3>
            <p>Take your notes</p>
        </Header>
    );
};

 

 

2. import 해오기

 

button 같이 자주 돌려쓰는  태그는 Button 컴포넌트를 따로 만들었다.

기본 틀은 동일하지만 글자색, 배경색, 위치 등 자주 바뀌는 부분은 props로 받아서 쉽게 변경 가능하다.

 

CSS Modules

// Detail.modules.css
.btn_wrap {
	display: flex;
}

.btn {
	background-color: #2146c7;
    color: white;
    border-radius: 0.2rem;
    padding: 0.3rem;
    cursor: pointer;
}

// Detail.js
import styles from "./Detail.module.css";

//...
return (
    <div className="btn_wrap">
        {id && (
            <button className=`${styles.btn}` color="#BB2525">
                Delete
            </button>
        )}
        <button className=`${styles.btn}` onClick={saveNote}>
            Save
        </button>
        </div>
    </div>
    );
}

 

Styled Components

// components/Button.js
import styled from "styled-components";

const StyledButton = styled.button`
    padding: 0.5rem;
    border-radius: 0.5rem;
    color: ${(props) => props.color || "#11009e"};
    border: 1px solid ${(props) => props.color || "#11009e"};
    background: white;
    display: flex;
    float: ${(props) => (props.$right ? "right" : "left")};
    &:hover {
        color: white;
        background: ${(props) => props.color || "#11009e"};
    }
`;

function Button({ children, ...props }) {
    return <StyledButton {...props}>{children}</StyledButton>;
}

export default Button;

// Detail.js
import Button from "../components/Button";

//...
return (
    <div>
        {id && (
            <Button onClick={deleteNote} color="#BB2525">
                Delete
            </Button>
        )}
        <Button $right onClick={saveNote}>
            Save
        </Button>
        </div>
    </div>
    );
}

 

 

---

파일을 따로 생성하지 않아도 된다는 점에서는 styled-components 방식이 더 간편하게 사용 할 수 있었다.

아직 styled-components가 제공하는 모든 기능들을 다 사용해 보진 못했지만

조금 더 친숙해 진다면 보다 쉽게 스타일 적용을 할 수 있을것 같다.

 

 

 

📌 참고사이트

https://styled-components.com/docs/basics#motivation

styled-components: Basics