반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- App.vue
- MySQL
- ES6
- react
- scss
- Vue.js
- jsx
- TypeScript
- mapGetters
- sass
- Vue
- nodejs
- 자바스크립트
- CSS
- event
- vuex
- HOC
- State
- 리액트
- webpack
- 자료구조
- storybook
- Wecode
- Vue transition
- input
- JavaScript
- 댓글달기
- express
- v-html
- 쉬운설명
Archives
- Today
- Total
익명의 개발노트
[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;
반응형
'코딩일기 > TIL' 카테고리의 다른 글
[vue] event-bus (0) | 2019.10.01 |
---|---|
browser history API (0) | 2019.09.30 |
[vue] image import error처리, 멀티 버튼 이벤트 처리 (0) | 2019.09.25 |
promise chain (0) | 2019.09.19 |
[vue] promise패턴, v-modal 클릭 이벤트 방지 (0) | 2019.09.16 |
Comments