React styling

 

CSS Module

• class, id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없다.
• 스타일 충돌을 방지하고 코드를 격리하여 체계적으로 CSS 설계가 가능하다.
• 스타일링 직접 하나하나 해야 한다.

 

UI framework (ex. Ant Design, Material UI)

• 이미 다 만들어져 있어서 간편하고 쉽게 쓰기에 좋다.
• 이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천한다.
• 해당 framework의 디자인철학을 벗어나기 쉽지 않다.
• 컴포넌트들을 커스터마이징 하기 어렵다.

import "antd/dist/antd.css";
import { Button } from "antd";

export default function App() {
    return (
        <div>
            <Button type="primary">Primary Button</Button>
            <Button type="secondary">Secondary Button</Button>
            <Button type="danger">Danger Button</Button>
        </div>
    );
}

 

CSS framework (ex. W3CSS, TailwindCSS)

• 거대한 CSS 파일 하나를 가져오는 것이다.
• 개발자가 따로 CSS 파일을 작성하지 않아도 HTML에 클래스만 적어주면 정해진 규칙대로 스타일링이 적용된다.
• CSS에 대한 이해력이 있어도 해당 framework를 사용하기 위한 학습을 또다시 해야 한다.
• 이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천한다.

 

CSS-in-JS library (ex. styled component, emotion)

• 따로 CSS 파일 만들 것 없이 JSX 파일 안에서 스타일링까지 해결 가능하며 컴포넌트 재사용성이 쉬워진다.
• JS 값들을 props로 넘겨줘서 해당 JS 값에 의도된 styling을 바로 적용 할 수 있다.
• class이름에 random string이 생성되기 때문에 선택자 이름이 겹칠 우려가 없다.
• 스타일링을 직접 개발자가 하나하나 해야 한다.

import styled from "styled-components";

const Title = styled.h1`
    font-size: 1.5rem;
    text-align: center;
    color: palevioletred;
`;

export default function App() {
    return <Title>Hello World</Title>;
}

 

 

JavaScript template literal

문자열 안에서 JS 표현식을 사용할 수 있게 하는 문법이다.

const string = "elice"
const message = `hello ${string}`

console.log(message)
// 결과 : "hello elice"

 

 

styled components

const Button = styled.button`
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
    background: palevioletred;
    color: white;
`

function App() {
	return <Button>SampleButton</Button>
}

 

const Button = styled.button`
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;
    background: ${props => props.primary ? "palevioletred" : "white" };
    color: ${props => props.primary ? "white" : "palevioletred" };
`
function App() {
    return (
        <div>
            <Button>Normal Button</Button>
            <Button primary>Primary Button</Button>
        </div>
) }

 

 

CSS와 SCSS 비교

SCSS에서는 선택자 중복 회피가 가능하고 이 외에도 SCSS variable 등 여러 추가 기능 가능하다.

/* CSS */
.name.red {
	color: red;
}
.name .blue {
	color: blue;
}
.name .green {
	color: green;
}
.name .child .yellow {
	color: yellow;
}
.name + .name {
	color: purple;
}

/* SCSS */

.name {
    &.red {
    	color: red;
    }
    .blue {
    	color: blue;
    }
    .green {
    	color: green;
    }
    .child {
        .yellow {
        	color: yellow;
        }
    }
        + .name {
        	color: purple;
    }
}

 

SCSS in styled component

+, & 등 여러 선택자를 사용할 수 있음 중첩 선택자 스타일링 가능

const SCSSStyledDiv = styled.div`
    background-color: orange;
    color: white;
    
    div {
    	background-color: red;
    }
    
    .purple {
    	background-color: purple;
    }
`;

 

function Test() {
    return (
        <SCSSStyledDiv>
            parent elem with className(orange)
            <div>child(red)</div>
            <div className={"purple"}>
            	child elem with className(purple)
            </div>
        </SCSSStyledDiv>
    )
}

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript