[React Study] CSS

inline Style

style Attribute는 Camel Case Property를 가진 Javascript 객체로 받아들인다.
"px" 접미사가 자동으로 추가되어, px가 기본 단위이다.
단, 주요수단으로 style Attribute를 사용하는 것은 권장되지 않는다.
className props에 문자열을 넘겨서, CSS 클래스를 컴포넌트에 추가한다.

function HelloWorldComponent(){
  return <div style={{height: 10}}>
    Hello world</div>
}

CSS Module

전역에서 className이 중복되지 않도록, App-name, App-catcher와 같은 네이밍에 방책들을 강구했지만, 이 단점을 극복하기 위해 CSS Module을 사용할 수 있다.

사용하는 이유

• No more Conflicts
• Explicit dependencies
• No global scope

특징

• Naming Convention
  [name].module.css 의 파일명으로 css 파일을 작성 한다.

CSS in JS

외부의 파일에 CSS를 정의하는 대신에 JavaScript와 결합하는 패턴을 의미한다.

특징

• Automatic critical CSS
  렌더링을 할 때 스타일을 불러서 렌더링하기 때문에 효율을 어느정도 얻을 수 있다.
• No class name bugs
• Easier deletion of CSS
• Simple dynamic styling
• Painless maintenance
• Automatic vendor prefixing

어떤 이유에서 다양한 방법들의 CSS가 나왔는지와 특징들을 알았다면 연습에서 기술을 체득하는 것이 중요하다!