[ReactJS] Basic of React

Vanilla JS

HTML 작성
Script 작성
1) HTML 요소 가져오기
2) 이벤트 감지
3) HTML 업데이트

위와 같은 일련의 과정이 항상 필요하게 됨.

<html>
    <body>
        <span>Total clicks: 0</span>
        <button id="btn">Click me</button>
    </body>
    <script>
        let counter = 0;
        const button = document.getElementById("btn");
        const span = document.querySelector("span");
        function handleClick() {
            counter++;
            span.innerText = `Total clicks: ${counter}`;
        }
        button.addEventListener("click", handleClick)
    </script>
</html>

React JS

module 설치
- react: interactive한 UI를 만들 수 있도록 하는 엔진 같은 역할 -> interactive power
- react-dom: react element들을 HTML body에 둘 수 있도록 함
- 설치가 잘 된 경우, 로그에서 React가 출력됨

element 생성 방식

JS 내에서 HTML 요소 생성
React JS가 HTML로 번역

<html>
    <body>
  		<div id="root"></div>
    </body>
     <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
     <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script>
		const root = document.getElementById("root");

		// Vanilla JS에서 4줄에 걸친 코드가 한 줄로 구현 !
		// old way of create element
        const h3 = React.createElement("h3", {
            onMouseEnter: () => console.log("mouse enter"),
        }, "Hello I'm a span");
        const btn = React.createElement("button", {onClick: () => console.log('clicked!')}, "Click me");

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

    </script>
</html>

실행 결과

JSX

JS를 확장한 문법
Babel 설치
- JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 코드 변환 작업 필요

- 변환 작업을 하지 않을 경우, 아래와 같이 브라우저가 JSX 코드를 이해하지 못함
JSX를 이용한 element 생성 방식
JSX를 활용한 코드

<html>
    <body>
        <div id="root"></div>
    </body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        const root = document.getElementById("root");

        // const h3 = React.createElement("h3", 
        //     {
        //         onMouseEnter: () => console.log("mouse enter"),
        //     }, "Hello I'm a span");
		
		// 컴포넌트를 함수로 생성	  
		const Title = () => (<h3 
            id= "title" 
            onMouseEnter = {() => console.log('mouse enter')}
        >
            Hello I'm a title
        </h3>);

        // const btn = React.createElement("button", 
        //     {
        //         onClick: () => console.log('clicked!'), 
        //         style: {
        //             backgroundColor: "tomato"
        //         }
        //     }, "Click me");
        const Button = () => (<button 
            style={{
                backgroundColor: "tomato"
            }} 
            onClick={()  => console.log('clicked!')}
        >
            Click me
        </button>);

        const Container = () => (
            <div>
                <Title />
                <Button />
            </div>
        );
        ReactDOM.render(<Container/>, root);
    </script>
</html>

Author And Source

이 문제에 관하여([ReactJS] Basic of React), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hahaha/ReactJS-Basic-of-React

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

[ReactJS] Basic of React

Vanilla JS

React JS

JSX

Author And Source

좋은 웹페이지 즐겨찾기