Css

Css in React ?

React의 컴포넌트에 Css를 적용하는 방법에 대해서 알아보자.

Html 파일에 Css 파일을 적용해 봤다면 어렵지 않다.

Css가 적용안된 현재 상태를 먼저 확인해보면 아래와 같다.

Css를 적용해보자.

방법은 간단하다. 폴더를 보면 부모 컴포넌트인 App.js의 Css파일인 App.css가 있을것이다.
그 파일에 Css를 작성해 주면 된다.

App.css는 App.js에서 import하고 있기 때문에 전역으로 모든 컴포넌트에 스타일이 적용이 된다.

import { useState } from 'react';
import './App.css';
import ToDoForm from './components/ToDoForm/ToDoForm';
import ToDoList from './components/ToDoList/ToDoList';

function App() {
  const [todoList, setTodoList] = useState([]);

  const getToDo = (todo) => {
    setTodoList((prevList) => {
      return [...prevList, todo];
    });
  };

  const deleteToDo = (id) => {
    setTodoList((prevList) => {
      const updatedList = prevList.filter(list => list.id !== id);
      return updatedList;
    });
  }

  return (
    <div className="App">
      <ToDoForm onGetTodo={getToDo}></ToDoForm>
      <ToDoList todoList={todoList} onDeleteTodo={deleteToDo}></ToDoList>
    </div>
  );
}

export default App;

그러나 여기서 전역으로 적용된다는 점에서 문제가 발생할 수 있다.

첫번째는 App 컴포넌트 내부에 있는 컴포넌트 뿐만 아니라 다른 파일의 컴포넌트까지 모두 스타일이 적용될 수 있다.

두번째로 다른 파일의 컴포넌트 까지 모두 스타일이 적용될 수 있기에 만약 class 이름이 겹칠수 있다.

우선 첫번째 문제를 확인해보기 위해 App.css에 App 컴포넌트가 렌더링 되는 root div 태그의 배경색상을 yellow로 설정했다.

root div 태그는 App.js 상위 폴더의 public 내부 index.html에 있다.

// App.css

#root{
  background-color: yellow;
}

우측 #root를 확인해보면 background-color: yellow; 가 적용된것을 확인할 수 있다.

이처럼 Css가 모든 컴포넌트에 적용되기 때문에 두번째 문제를 일으킬 수 있다.

위 문제를 해결하기 위해 React는 Css-module이라는 기능을 제공해 준다.

---

Css-module

Css-module은 React가 컴포넌트의 class 이름이 겹치지 않게 고유한 이름으로 자동으로 변환시켜 주는 기능이다.

사용방법은 간단하다. css파일로 만든 파일의 .css 확장자 앞에 .module을 추가해주면 된다.

App.css -> App.module.css

Css-module 기능을 사용하면 고유한 class 이름을 갖기 때문에 다른 컴포넌트에서 사용할 수 없어 독립적인 Css 스타일을 갖을 수 있다.

Css-module을 이용해 App.css를 3개의 파일로 분리해보자.

각 컴포넌트 별로 module.css 파일을 생성해주고 App.css에 작성했던 Css코드를 그대로 옮겨주고 컴포넌트에 Css 파일을 import 해주면 되는데 여기서 한가지 차이점이 있다.

import {useState} from 'react';

import classes from './ToDoForm.module.css';

const ToDoForm = (props) => {
    const [todo, setTodo] = useState('');

    const changeHandler = (event) => {
        setTodo(event.target.value);
    }
    const submitHandler = (event) => {
        event.preventDefault();
        const todoList = {title: todo, id: Math.random()};
        props.onGetTodo(todoList);
        setTodo('');
    }
  return (
    <div className={classes.form_wrapper}>
      <form onSubmit={submitHandler}>
          <label htmlFor='todoInput'>Type your To Do.</label>
          <input onChange={changeHandler} value={todo} id='todoInput' type='text'></input>
          <button type='submit'>Add</button>
      </form>
    </div>
  );
};

export default ToDoForm;

바로 css 파일을 import할때 앞에 사용할 이름을 설정해야한다는 것이다. 사용방법은 태그안에 {} 중괄호를 이용해 객체의 프로퍼티에 접근하듯이 사용해주면 된다.

개발자 도구로 확인하면 아래와 같이 변경된것을 확인할 수 있다.

className={classes.form_wrapper} -> ToDoForm_rofm_wrapper__wMGe0

클래스를 여러개 적용할 경우 백틱을 사용하면 된다.

className={`${classes.form_wrapper} ${classes.example}`}

간단한 ToDoList 어플리케이션 완성 !

기능을 점차 추가하며 React에 대해서 더 알아보도록 하자.