여러개의 동적 className할당

css Module을 사용할경우, 여러개의 css 모듈을 적용하기 위해서는 여러개의 className을 동적으로 할당해야 한다.

다음의 상황을 가정하자. 먼저 첫 번째 css 모듈은 직접적으로 import하여 className을 지정하고, 두 번째 css 모듈은 상위 컴포넌트에서 props로 전달받아 className으로 지정한다.

다음과 같이 코드를 작성했다.
리액트 컴포넌트 트리구조는 다음과 같다.

import Card from "../UI/Card";
import classes from "./AddUser.module.css";

const AddUser = (props) => {
  const addUserHandler = (event) => {
    event.preventDefault();
  };
  return (
    <Card className={classes.input}>
      <form onSubmit={addUserHandler}>
        <label htmlFor="username">User Name</label>
        <input id="username" type="text" />
        <label htmlFor="age">Age(Years)</label>
        <input id="age" type="number" />
        <button type="summit">Add User</button>
      </form>
    </Card>
  );
};

상위 컴포넌트인 AddUser에서 Card컴포넌트로 css module을 props로 전달했다.

props로 css module을 받은 하위 컴포넌트인 Card는 다음과 같이 여러개의 className을 지정해 모듈을 적용했다.

import classes from "./Card.module.css";

const Card = (props) => {
  return (
    <div className={`${classes.card} ${props.className}`}>{props.children}</div>
  );
};

export default Card;

조건부 렌더링

• && 연산자를 이용하면 조건이 허용될 때만 렌더링되는 구문을 작성할 수 있다.

 {error && <ErrorModal title={error.title} message={error.message} />}

조건부 className 지정

      type={props.type || "button"}
      //props.type 값이 존재하면 그대로, 존재하지 않으면 button이 된다.

Wrapper 컴포넌트

가장 바깥쪽 컴포넌트를 따로 만들어서 여러 상황에서 감싸는 용도로 사용한다.
Wrapper 컴포넌트의 주 목적은 공통된 스타일링이며, 예를 들어 어떤 컴포넌트든지 간에 Wrapper 컴포넌트를 부모 컴포넌트로 등록하면 배경은 흰색이 되고 둥근 border를 가지게 되는 것이다.

Wrapper 컴포넌트를 일반 CSS, CSS Module로 구현할 수 있지만, 내가 생각하기에는 Styled-Component로 구현하는 것이 가장 맛있다고 생각한다.

10년의 고민끝에 리액트에서 최적의 스타일링 방법을 찾은 것 같다.
Wrapper Component와 조건부 스타일링이 필요한 태그는 Styled-component를 사용하고, 나머지는 Tailwind CSS를 사용하는 것이다.