React UI

React styling 방법론

React + styling 도구 목록

CSS Module

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

CSS Module 예시

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

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

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

UI framework (ex. Ant Design, Material UI)

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

UI framework (Ant Design) 예시

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

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이 생성되기 때문에 선택자 이름이 겹칠 우려가 없음
• 스타일링을 직접 개발자가 하나하나 해야 함

CSS-in-JS library (styled component) 예시

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

• string text ${expression} string text
• 쉽게 말해 문자열 안에서 JS 표현식을 사용할 수 있게 하는 문법.

const string = "James";
const message = `hello ${string}`;

console.log(message);
// "hello James"

JavaScript template literal with number

const number = 12345;
const message = `hello ${number}`;

console.log(message);
//  "hello 12345"

JavaScript template literal with boolean

const boolean = true;
const message = `hello ${boolean}`;

console.log(message);
//  "hello true"

JavaScript template literal with object

const object = { a: "apple" };
const message = `hello ${object}`;

console.log(message);
//  "hello [object Object]"

JavaScript template literal with ternary operator(삼항연산자)

const name = "chalie";
const gender = "male";
const message = `Hello ${
  gender === "male" ? "Mr." : "Mrs."
}${name}, nice to meet you`;

console.log(message);
// "Hello Mr.chalie, nice to meet you"

복습하기 좋았다!
프로젝트 대비 차원에서 프로젝트 전에 미리 해보자는 마인드로 리액트 강의 수강중인데 이번주 까지 끝내서 좋은 결과물 내자! 🙏 + 노드 강의도 들어야겠다.