[React] ReactJS로 영화 웹 서비스 만들기 (The BASICS OF REACT)

728x90

* 노마드코더 강의 정리 글 입니다.

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

React for Beginners

nomadcoders.co

The BASICS OF REACT

- 리액트 강의 시작 전 JS와 ReactJS를 비교해본다.

위와 같이 클릭 이벤트가 있는 카운트 프로그램을 만든다고 치자.

JavaScript

<!DOCTYPE html>
<html>
    <body>
        <h3>Total Clicks : 0</h3>
        <button id="btn">Click me</button>
    </body>
    <script> 
        
        let counter = 0;
        
        const button = document.getElementById('btn');
        const h3 = document.querySelector('h3');

        function handleClick(){
            counter = counter + 1;
            h3.innerText = `Total Clicks : ${counter}`;
        }

        button.addEventListener("click", handleClick);

    </script>
</html>

✔ HTML ➔ JS 순서

React 1 (createElement)

- 쉬운방법이 있지만 리액트의 동작 방식을 이해하기 위해서 어려운 방법으로 코드 작성

- 지금 하는 방법을 암기할 필요는 없음

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <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> 
        const root = document.getElementById("root");
        //React로 Element 생성("span", {span의 property}, "내용")
        const h3 = React.createElement(
            "h3", 
            { id : "title",
              onMouseEnter : () => console.log('mouse enter')}, 
              "Hello I'm a Title"
         ); 
        const btn = React.createElement(
            "button", 
            { onClick : () => console.log('im clicked')},
            "Click me"
         );
        const div = React.createElement("div", null, [span, btn]);
        ReactDOM.render(div, root);
    </script>
</html>

* React : UI를 만들 수 있게하는 엔진
* React-dom : 모든 react element들을 HTML body에 둘 수 있도록 해주는 라이브러리 또는 패키지

✔ JS ➔ HTML 순서

React 2 (JSX)

- JSX란 Javascript를 확장한 문법

<!DOCTYPE html>
<html>
    <body>
        <div id="root"></div>
    </body>
    <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>
    <script type="text/babel">
        const root = document.getElementById("root");
        
        const Title = () => (
            <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
                Hello I'm a Title
            </h3>
        );
        
        const Button = () => (
            <button onClick = {() => console.log('im clicked')}>
                Click me
            </button>
        );

        const Container = () => (
            <div>
                <Title />
                <Button />
            </div>
        );

        ReactDOM.render(<Container />, root);
    </script>
</html>

✔ 여기서 중요한 건 컴포넌트를 만들 땐 앞글자가 꼭 대문자여야 한다는 것!

다음 강의에서 계속

저작자표시 비영리 변경금지

'IT > React' 카테고리의 다른 글

[한입 크기로 잘라 먹는 리액트] - React.js 개론 (1)	2024.11.15
[한입 크기로 잘라 먹는 리액트] - Node.js 기초 (5)	2024.11.01
[React] ReactJS로 영화 웹 서비스 만들기 (STATE #1) (0)	2024.02.22

YeonBu's Archive 💜

[React] ReactJS로 영화 웹 서비스 만들기 (The BASICS OF REACT)

The BASICS OF REACT

'IT > React' 카테고리의 다른 글

티스토리툴바

[React] ReactJS로 영화 웹 서비스 만들기 (The BASICS OF REACT)

The BASICS OF REACT

'IT > React' 카테고리의 다른 글

관련글

티스토리툴바