React.js #JSX 인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 적용할 수 없습니다. 그 대신 css 스타일을 자바스크립트 객체 형식으로 만들어 적용해야 하는데요. key는 카멜표기법(camelCase)으로 작성합니다.

 

 

App.js

//(1) import React
//리액트는 하나의 태그 안에 감싼 형태여야 합니다.
//다중행의 태그로 선언하려할 땐 Fragment로 감쌀 수 있습니다.
import React, { Component, Fragment } from 'react';
 
//(2) import css
//style은 render(){}안에 선언하여 사용할 수 있지만 소스를 분리하여 사용합니다.
//리액트에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 저장할 수 없습니다.
 
import './App.css';
 
class App extends Component {
    render() {
        //(2) style 을 선언하여 css를 적용할 수 있습니다.
        const style = {
            backgroundColor: 'gray',
            border: '1px solid black'
        }
 
        //(3) { hi } 에 들어가는 텍스트를 선언합니다.
        const hi = 'hello react!';
 
        return (
            <Fragment>
                <h1 style={style}>{hi}</h1>
                <h2 className="App-header">bye</h2>
            </Fragment>
        )
    }
}
 
export default App;