React style, className, onClick

보기 쉽게 정리하려 포스팅합니다.

 

1. React style

<!-- html의 경우 -->
<div style="width: 690px; height: 358px; margin-bottom: 70px"></div>

/* React의 경우 */
<div style={{ width:"690px", height:"358px", marginBottom:"70px" }}></div>

 

2. React className

<!-- html의 경우 -->
<div class="example"></div>

/* React의 경우 */
<div className="example"></div>

 

3. React onClick

import React from "react";
import "./Example.css";

class Example extends React.Component {

    funcExample = (idx) => {
        console.log(idx);
    }

    render() {
        return (
            <div onClick={() => this.funcExample(1)}></div>
        )
    }
}

export default Example;