React 기초 )) React UI-React styling 방법론

1. React styling 방법론

1) 많이 쓰이는 React + styling 도구 목록

• CSS module
• CSS in JS library : styled components
• UI framework : Ant Design
• CSS framwork : W3.css

2) CSS module

• CSS 단점을 보완한 기술. (하나의 스타일 sheet가 여러 컴포넌트에 영향을 미치는 것을 보완하였다.)
• 하나의 스타일 시트가 하나의 컴포넌트에만 영향을 미친다.
• class, id 등에 random string(hash)을 달아주기 때문에 선택자가 겹칠 우려가 없다.
• 스타일 충돌을 방지하고 코드를 격리하여 체계적으로 CSS 설계가 가능하다.
• 스타일링을 직접 하나하나 해야 한다.

<App.jsx>

import * as React from 'react';
import styles from './app.module.css';  

export default function App() {
  return (
    <div>
      <h1 className={styles.title}>Pink Hello World</h1>  //hash 가 붙은 클래스
      <h1 className={"title"}>Normal Hello World</h1> //string으로 된 클래스
    </div> 
  );
}

<app.module.css>


h1 {
  font-family: Lato;
  font-size: 1.5rem;
}
.title {
  font-size: 2.5rem;
  color: pink;
}

3) UI framework

• 대표적인 예 : Ant Design, Material UI
• 이미 다 만들어져 있어서 간편하고 쉽게 쓰기 좋다.
• 이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천한다.
• 해당 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">Secondary Button</Button>
      <Button type="danger">Danger Button</Button>
    </div>
  
  );
}

4) CSS framwork :

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

<W3CSS>

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>W3School 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>
        </div>
      </div>
    </div>
  
  );
}

5) CSS in JS library

• 대표적인 예 : 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>
}