[react] css 작성방법 결정

1. 일반 css사용 

   우리가 아는 일반적인 css 이다. 단점은 재사용성에 불리하고, 빌드시 css가 하나의 파일로 합쳐지기 때문에

  클래스 네임이 중첩되면 css 가 꼬여버린다.

2. css-module사용

   리액트에서 css파일은 하나로 합쳐지기 때문에 클래스 네임이 같으면 css가 꼬여버리기 때문에 모듈시스템을 사용하면, 클래스 네임이

   중첩되어도 css는 꼬이지 않는다. 

[fileName].module.css 로 이름을 짓는다.

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

function Button({size}){
	if(size === 'big'){
    	return <button className={`${style.button} ${style.big}`}> 큰 버튼</button>; 
    }else{
    	return (
        	<button className={`${style.button} ${style.small}`}>작은 버튼</button>;
        )
    }
 }
 export default Button;
 

핵심으로 봐야할 부분은 2번째 import 줄이다. import에서 style을 객체로 불러와서 사용하기때문에 클래스명이 중첩될 일이 없다.

클래스네임 라이브러리를 사용해서 위 방법보다 더 간략히 사용할 수 있다.

3. Sass 사용 : 중첩활용부터 사용용도가 매우 뛰어나다.

4. css - in -js 사용(ex : styled-components)

css 를 자바스크립트로 컨트롤 하는 방법이다. 

import React, { Component } from 'react';
import Box from './box4/Box4';
import './App.css';

class App extends Component {

  render() {
    return (
      <div className="App">
        <Box size="big"/>
      </div>
    );
  }
}

export default App;

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

const BoxCommon = styled.div`
    width: ${props =>(props.isBig ? 200 : 100)}px;
    height : 50px;
    background-color : #aaaaaa;
    `;

function Box({size}){
    const isBig = size === 'big';
    const label = isBig ? '큰 박스' : '작은 박스';
    return <BoxCommon isBig={isBig}> {label}</BoxCommon>
}    
export default Box;