오늘도 코딩하나

[React] ReactJS로 영화 웹 서비스 만들기_(1) 본문

React/노마드코더

[React] ReactJS로 영화 웹 서비스 만들기_(1)

오늘도 코딩하나 2024. 12. 28. 19:05

React 복습겸

노마드코더 React강의 중 기초편인 [ ReactJS로 영화 웹 서비스 만들기 ] 강의 수강을 시작했다.

 

https://nomadcoders.co/react-for-beginners

 

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

React for Beginners

nomadcoders.co

 

강의 내용 요약
#1.2 ~ #2.6

 

○ VanillaJS vs ReactJs

<!DOCTYPE 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 = counter + 1;
            span.innerText = `Total clicks: ${counter}`;
        }
        button.addEventListener("click", handleClick);
    </script>
</html>
  1. html 만들기
  2. Javascript에서 가져오기
  3. event 감지
  4. data 업데이트

   ※ ReactJS : 어플리케이션이 아주 interactive하도록 만들어주는 library

   ※ React-dom : 모든 React element들을 HTML body에 둘 수 있도록 해준다.

<!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');
    const h3 = React.createElement('h3', { onMouseEnter: () => console.log('mouse enter') }, "Hello I'm a span");
    const btn = React.createElement(
        'button',
        {
            onClick: () => console.log('im clicked'),
            style: {
                backgroundColor: "tomato"
            },
        },
        'Click me'
    );
    const container = React.createElement('div', null, [h3, btn]);
    ReactDOM.render(container, root);
</script>

</html>
  1. React, React-dom import
  2. Javascript에 React.createElement()로 UI 정의
    (tag name, property, content)
  3. render
    → React element를 가지고 HTML로 만들어 배치한다.
중간 내용 정리

VanillaJS -  html ▷javascript
ReactJS  -  javascript ▷ html
ReactJS는 VanillaJS에서 해왔던 방식을 거꾸로 함.
React는 자바스크립트에서 시작해서 그 다음에 HTML로 변환된다.

○ JSX

   createElement를 대체하려면 JSX를 사용해줘야 한다.

   

   ＃JSX는 뭔데? 왜 사용해야 하지?

      - JSX는 Javascript를 확장한 문법

      - html에서 사용한 문법과 흡사한 문법을 사용해서 React 요소 만들 수 있어 매우 편리함

<!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 id="btn" onClick={() => console.log('im clicked')}
            style={{ backgroundColor: "tomato" }}>
            Click me
        </button>
    )
    const Container = <div><Title /> <Button /></div>;
    ReactDOM.render(Container, root);
</script>

</html>

브라우저가 온전히 JSX를 이해하는 것은 아니라서 babel을 import해주지 않으면 error 발생함

babel은 JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 변환해준다.

 

☆ 모든 컴포넌트의 첫 글자는 대문자 사용하기

<title /> 이렇게 적으면 html로 인식함.

 

- 컴포넌트를 다른 컴포넌트 안에 넣으려면 함수형이어야 한다.

 

 

브라우저에서 확인해보면

(1) body에는 소스에 작성한대로 Title, Button, Container가 그대로 들어가있다.

(2) head에 변환된 소스가 담겨있고,
     각 컴포넌트는 createElement를 return하고 있다.

 

 

알고 있던 내용이어도 강의를 들으니 한번 더 확실하게 정리가 되는 느낌이다.

 

 

 

'React > 노마드코더' 카테고리의 다른 글

[React] ReactJS로 영화 웹 서비스 만들기_(6)  (1) 2025.01.03
[React] ReactJS로 영화 웹 서비스 만들기_(5)  (0) 2025.01.02
[React] ReactJS로 영화 웹 서비스 만들기_(4)  (1) 2025.01.01
[React] ReactJS로 영화 웹 서비스 만들기_(3)  (1) 2024.12.30
[React] ReactJS로 영화 웹 서비스 만들기_(2)  (0) 2024.12.29
'React/노마드코더' Related Articles more