React Component 꾸며보기

React 에서는 

컴포넌트 스타일링 하는 방법이 크게 4가지 정도가 있다.

왜 이렇게 많냐고요?

그건 잘 모르지만,

아마 개발자들 혹은 프로젝트 팀 마다

선호하는 방식이

다르기 때문일 것이다.

 

예전에 참여했던 큰 규모의 프로젝트도

처음에는 Css in css 를 선호하더니

Vue 개발자들과의 협업을 하니 

Css in Js 로 방향을 틀어 파일 정리에 애를 먹을 기억이 있었다.

 

그럼 알아보자

 

1. Inline style

이 방식은 모두 알다시피

Inline style은 컴포넌트 내부에서 스타일을 직접 지정하는 방식이다.

Css 파일을 작성하지 않고 간단하게 스타일을 지정할 수 있어서 유용하다는 장점이 있다.

하지만, 코드가 너무 보기 안좋아진다는 단점이 있다.

 

import React from 'react';

const Test = () => {
  const styles = {
    color: 'red'
  };

  return (
    <h1 style={styles}>Hello, world!</h1>
  );
}

 

2. className

className 스타일링 방식은 Css 클래스를 사용하여 스타일을 적용하는 방식이다.

Css 파일을 만들어서 사용하던 것과 같다.

 

// [style.css]

.title {
  color: red;
}
// ----------------------------------------------------------------------
// [App.js]

import React from 'react';
import './style.css';

function App() {
  return (
    <div>
      <h1 className="title">Hello World!</h1>
    </div>
  );
}

export default App;

 

3. Css Modules

Css Modules 방식은 Css 클래스 이름 충동을 방지하기 위해 사용하는 방식이다.

각각의 Css 파일은 고유한 이름을 가지며,

클래스 이름도 파일별로 고유한 이름을 가지게 된다.

 

음.. 이게 무슨 소리냐?!

Css modules는 클래스 이름 충돌을 방지하기 위해

클래스 이름에 해시값을 추가하여 고유하게 만든다.

이 해시값은 빌드할 때 생성되며, 클래스 이름 뒤에 추가된다.

예를 들면 `.button` => `.button__diKD3FJ` 이런식으로 말이다.

 

// App.js

import React from "react";

import styled from "./App.module.css";

const App = () => {
  return (
    <>
      <h1 className={styled.title}>타이틀</h1>
    </>
  );
};

export default Title;

// -----------------------------------------------
// App.module.css

.title {
  color: red;
}

보이는 것처럼 사용하면 된다.

 

1. 컴포넌트명.module.css 파일을 만든다.
2. import styled from '컴포넌트명.module.css 이 있는 경로'
3. 원하는 태그에 className={styled.클래스명} 한다.

 

4. styled-components

이 친구는 React에서 스타일링을 위한 라이브러리 중 하나이다.

Css-in-Js 방식에서 가장 많이 사용한다.

1위를 차지한 styled-components

이 방식은 특이하게 사용한다.

 

먼저, 라이브러리이기때문에 install을 해준다.

 

// npm
npm install styled-components

// yarn
yarn add styled-components

 

이런 식으로 사용하면 된다.

import React from "react";
import styled from "styled-components";

const OnProductsTb = (props) => {
  const { category, items, inStockOnly } = props;
  const filteredItems = inStockOnly
    ? items.filter((item) => item.stocked)
    : items;

  return (
    <>
      <tr>
        <Category>{category}</Category>
      </tr>
      {filteredItems.map((item, idx) => (
        <tr key={idx}>
          <ProductName stocked={item.stocked}>{item.name}</ProductName>
          <td>{item.price}</td>
        </tr>
      ))}
    </>
  );
};

export default OnProductsTb;

// styled-components
const Category = styled.td`
  font-weight: 900;
`;

const ProductName = styled.td`
  color: ${(props) => (props.stocked ? "black" : "red")};
`;

 

위의 코드는 물품이 있는지 없는지에 따라 

font의 color가 black or red 로 나타나는 코드이다.

 

이 코드가 알려주는 것은

stocked를 props으로 받아서 {item.stocked}의 값에 따라

color: ${(props) => (props.stocked ? 'black' : 'red')} 와 같이

조건문으로 분기 처리를 할 수 있다는 것이다.

 

---

 

그럼 뭘 사용하냐?

 

개발적인 효율성에 중점을 둘 것이다.

Styled Components

 

인터렉티브한 css, animation을 많이 쓰고싶다.

Css Modules