React - JSX 2 (CSS, 주석 사용법)

본 내용은 VELOPERT님의 '누구든지 하는 리액트 : 초심자를 위한 react 핵심 강좌' 강의를 듣고 복습하기 위해 작성한 내용입니다.

css 사용하기

import React, { Component } from 'react';

class App extends Component {
    render() {
        const style = {
            backgroundColor : 'black', // 카밀케이스로 속성명 지정
            padding : '16px',
            color : 'white',
            fontsize : '36px'
        };

        return <div style={style}>안녕하세요!</div>;
    }
}

export default App;

• 카밀 케이스로 속성명을 사용한다
• jsx로 지정했기에 { } 안에 넣어주어야 한다.

class를 사용한 style 지정

// App.css
.App {
    background : black;
    color : aqua;
    padding : 1rem;
    font-size : 36px;
    font-weight : 600;
}

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

class App extends Component {
    render() {
        const style = {
            backgroundColor : 'black', // 카밀케이스로 속성명 지정
            padding : '16px',
            color : 'white',
            fontsize : '36px'
        };

        return <div className="App">안녕하세요!</div>;
    }
}

export default App;

• class가 아닌 className 키워드를 사용하자

JSX안에 주석 사용하기

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

class App extends Component {
    render() {
        return (
            <div>
                {/* 멀티라인 주석 */ }
                <h1
                    // 컴포넌트 단위로 주석을 작성할떄
                    // 이런식으로도 가능하다.
                >안녕하세요!</h1>
            </div>;
        )
    }
}

export default App;