[엘리스 AI트랙] 05-04 React UI

1. 리액트와 사용하기 좋은 Styling 도구 종류

 

1) CSS Module

•  CSS 파일의 확장자를 .module.css 로 지정해서 사용

장점	단점
class, id 등에 random string을 달아주기 때문에 선택자가 겹치지 않음 스타일 충돌을 방지하고 코드를 격리하여 CSS 설계가 가능	스타일링을 일일히 직접 해야함

//App.jsx
import styles from "./app.module.css"

export default function App() {
	return (
    	<div>
          <h1 className={styles.title}>Pink Hello world</h1>
          <h1 className={"title"}>Normal Hello world</h1>
        </div>
    );
}

/* app.module.css */
h1 {
	font-size: 1.5rem;
}

.title {
	font-size: 2.5rem;
    color: palevioletred;
}

 

CSS Module 결과물

 

2) CSS in JS library

장점	단점
컴포넌트 재사용성이 쉬워짐 JS 값들을 props로 넘겨줘서 해당 JS 값에 의도된 styling을 바로 적용할 수 있음 class 이름에 random string이 생성되기 때문에 선택자 이름이 겹칠 우려가 없음	스타일링을 일일히 직접 해야함

//App.jsx
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>
}

 

styled component 결과물

 

3) UI framework

• ex) Ant Design, Material-UI ...

장점	단점
이미 다 만들어져 있기 때문에 간편하고 쉽게 사용 가능	컴포넌트들을 커스터마이징하기 어려움 해당 framework의 디자인 철학을 벗어나기 어려움

 

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

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

UI Framework 결과물

 

4) CSS framework

• 거대한 CSS 파일 하나를 가져오는 것
• ex) Bootstrap, Tailwind CSS...

장점	단점
개발자가 따로 CSS 파일을 작성하지 않아도 HTML에 클래스만 적어주면 정해진 규칙대로 스타일링이 적용	CSS에 대한 이해력이 있어도 해당 framework를 사용하기 위한 학습이 또 필요함

// App.jsx
import { Helmet } from "react-helmet";

export default function App() {
	return (
    	<div>
        	<Helmet>
            	<link
                rel="stylesheet"
                href="https://www.w3schools.com/w3css/4/w3.css" />
            </Helmet>
            <div className="w3-container w3-green">
            	<h1>W3Schools Demo</h1>
                <p>Resize this responsive page!</p>
            </div>
            <div className="w3-row-padding">
            	<div className="w3-third">
                  <h2>London</h2>
                  <p>London is the capital city of England.</p>
                  <p> It is the most populous city in the United Kingdom,
                  with a metropolitan area of over 13 million inhabitants.</p>
              </div>
          </div>
      </div>
    );
}

 

CSS framework 결과물