[react] 리액트 입문

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>

<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

 

 

정석방법

    const root = document.getElementById("root");

 

    const h3 = React.createElement(

        "h3", // 만들 요소명

        { // 속성들(props)

            onMouseEnter: () => console.log("mouse enter")

        },

        "Hello I'm a span" // 들어갈 내용

    );

    const btn = React.createElement("button", {

        onClick: () => console.log("i\'m clicked"),

        style : {

            backgroundColor : "tomato"

        }

    }, "Click me");

    const container = React.createElement("div", null, [h3, btn])

    ReactDOM.render(container, root);

 

각 react 요소를 createElement해서 요소, 프롭, 컨텐츠를 넣어 미리 생성시킨 뒤 렌더링함

 

 

실무방법

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>

<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

 

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<!-- 바벨 : JavaScript를 확장한 문법으로 JSX라고 부르는 녀석을 React문법으로 변환시켜준다  -->

 

    const Title = () => (

        <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>

            Hello I'm a title

        </h3>

    );

 

    const Container = (

        <div>

            <Title />

        </div>

    )

    ReactDOM.render(Container, root);

react 요소를 함수화해 html 요소를 그대로 때려박고 함수를 호출하는 방식으로 사용함 (재사용하기 편함)

 

① 이벤트를 프롭에 지정할 때 앞에 on을 붙여줘야 리액트가 이벤트로 인식함

② 만든 컴포넌트는 무조건 대문자로 시작해야함(소문자인경우 html태그로 인식함)