[React] 리액트 기본 스타일 지정 ( Basic CSS in ReactJS )

안녕하세요 리액트를 제대로하기전에 

라이프 사이클 까지보았고 이번에는 리액트의 스타일에 대한 작성을 해보려고합니다.

기본적으로 앞서서 스타일을 작성하는 방법에서는

2가지 방법이 있었죠

1. Inline Style CSS 

인라인 방식의 CSS는 클래스 또는 컴포넌트형 함수들 에서 

js Object 형식으로 만들어서 직접 태그에 넣는 방식의 스타일 방식입니다.

인라인 스타일 방식입니다.

render 함수에서 직접 작성합니다.

render() {

const tempStyle={

display:"inline-block",

width:"100px",

height:"100px",

boder:"1px solid black",

background:"orange",

}

return (

<Fragment>

<div style={tempStyle}></div>

</Fragment>

);

}

}

const tempStyle 이라고 작성된 style을 직접 리턴하는 태그에 style로 넣어주게됩니다.

위의 코드에서는 변수를 만들어서 넣었지만 같은형식으로 태그에도 직접 넣어줘도 됩니다.

<div style={{

display:'inline-block',

width:'100px',

height:'100px'

}}></div>

해당 인라인으로 작성후 npm start 로 확인 시 

정상적으로 렌더링 된점을 확인 하실 수 있습니다.

이 방식이 인라인 스타일 방식입니다.

2. Import Style CSS

미리 작성해둔 CSS를 불러와서 (import) 태그에 className으로 작성하여서 사용하는 스타일 방식

import 하여서 css를 사용하는 경우 다른 경우(리액트가 아닌 경우) 에서는

<link rel="stylesheet" href="./style/styles.css"/> 와 같은 방식으로 가져오게 되지만

리액트에서는 import 구문을 통하여서 가져와야합니다.

import styles from './App.css';

해당과 같이 호출 하여서

<div className={styles.box} ></div>

.box{

display:inline-block;

width:100px;

height:100px;

border:1px solid black;

position:fixed;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}

의 box 클래스를 가져와서 입힐 때는 위와같이 작성하여야 합니다.

하지만 작성엔 문제가 없지만

화면에 렌더링시에는 나타나지 않습니다.

왜!!!? webpack 설정이 안되어있기 때문이죠 

테스트용이기 때문에 webpack production 은 건드리지 않고 dev만 건드리면

webpack.config.dev.js 에  css-loader 부분이 있습니다.

** 만약에 create-react-app 으로 만들어졌는데 webpack.config.dev.js가 없다면??

해당 프로젝트에서 npm run eject 명령어를 입력하시면 해당 파일이 생성됨을 확인하실수 있습니다.

이부분에

loader: require.resolve('css-loader'),

options: {

importLoaders: 1,

// modules 지정안할시는 아예 import가 되지않음

modules:true,

},

modules 옵션을 추가해줍시다.!!

그러면 정상적으로 화면에 렌더링이 되는 점을 볼수 있습니다.

위의 코드에서 styles.box 로 넣었지만 리액트는 여러개의 클래스도 넣을 수 있습니다.

<div className={[styles.box,styles.blue].join(' ')}></div>

해당 방법은 너무 지저분하기도 하고 코드 가독성도 그냥 그래서 조금 더 줄이기 위해서 classnames라는 lib를 사용한다고 합니다.

npm i classnames

- .join 이 빠지고 단순 괄호로 묶어서 사용 ( 하지만 style.box style.box  style이 중복되는 현상 발생 )

>classnames에 bind라는 기능을 사용 !! 

import classNames from 'classnames';

<div className={classNames(style.box,style.blue)}></div>

결과

from classnames를 classnames/bind로 꼭 수정하셔야됩니다.

const st = classNames.bind(styles);

-> 해당 css파일들에 대한 클래스를 st가 묶어서 가지고 있는 것으로 보입니다.

그래서 결국 다중 클래스 를 집어 넣을시에는

st('box','second',third') 로 하게되면

App.css에 있는

.box{}   .second{} .third{} 가 순서대로 불려와집니다.

중복되는 클래스가 있을 경우 뒤의 css 스타일이 적용됩니다. (유의바람!)

import React, { Component,Fragment} from 'react';

import classNames from 'classnames/bind';

import PropTypes from 'prop-types';

import styles from './App.css';

const st = classNames.bind(styles);

class App extends Component {

static propTypes = {

name: PropTypes.string,

}

render() {

const isBlue = true;

const tempStyle={

display:"inline-block",

width:"100px",

height:"100px",

boder:"1px solid black",

background:"orange",

}

return (

<Fragment>

<div className={st('box',{

blue:isBlue

})}>

</div>

</Fragment>

);

}

}

export default App;

다음에는 sass에 대해서 작성하겠습니다!