React import, 함수형/클래스형 컴포넌트, ES7 React 확장 프로그램 사용 예

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

 

1. React import

// React
import React from "react";

// CSS
import "./ExampleComponent.css";

// Component
import ExampleComponent from '../components/Example/ExampleComponent'

// Library
import { BrowserRouter } from 'react-router-dom';
import { Route, Switch } from 'react-router';
import { Redirect } from 'react-router';

 

2. React Component 기본 /

ES7 React/Redux/GraphQL/React Native snippets 확장 프로그램 단축키

 

-  VSCode에서 "ES7 React/Redux/GraphQL/React Native snippets" 를 검색하여

   확장 프로그램을 설치하시면 됩니다.

 

1) 함수형 컴포넌트

function ExampleComponent() {
    return (
        <div></div>
    )
}

export default ExampleComponent;

// 또는 rfce 치고 엔터

 

1-1) 함수형 컴포넌트, 화살표 함수 문법

const ExampleComponent = () => {
    const handlerOver = ("인자값") => {}
    const handlerOut = () => {}
    return (
        <div onMouseOver={handlerOver} onMouseOut={() => handlerOver("인자값")}>Example</div>
    )
}
export default ExampleComponent;

// 또는 rafce 치고 엔터

 

2) 클래스형 컴포넌트

class ExampleComponent extends Component {
    const handlerOver = ("인자값") => {}
    const handlerOut = () => {}
    render() {
        return (
            <>
                <div onMouseOver={this.handlerOver}>
                    Example
                </div>
                <div onMouseOver={() => this.handlerOver()}>
                    Example2
                </div>
                <div onMouseOver={() => this.handlerOver("인자값"}>
                    Example3
                </div>
            </>
        )
    }
}

export default ExampleComponent;

// 또는 rce 치고 엔터

 

클래스형 컴포넌트에서는 render 함수가 꼭 있어야합니다.