FrontEnd/React

nomadcorders_ReactJS로 영화 웹 서비스 만들기_DAY1

Leo.K 2023. 3. 22. 17:05

2023.03.22
#2.0 Introduction

ReactJS는 웹 페이지를 Interactive하게 만들어 준다.
바닐라 JS와 ReactJS를 직접 코드로 비교하면서 살펴보자. 

#2.1 Before React
바닐라 JS로 버튼을 클릭하면 클릭한 카운트가 증가되도록 아주 간단한 기능을 구현해보자.

1. html 작성
2. 자바스크립트로 가져오기
3. 이벤트 리스너 등록
4. 데이터 없데이트
5. 업데이트 html

 

위와 같은 순서로 진행하면 아래와 같은 소스코드와 결과를 확인할 수 있다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<span>Total clicks : 0</span>
<button id="btn">Click me</button>
<script>
  let counter = 0;
  const button = document.querySelector("#btn");
  const span = document.querySelector("span");
  function handleClick(){
    counter += 1;
    span.innerText = `Total clicks : ${counter}`;
  }
  button.addEventListener("click", handleClick);
</script>
</body>
</html>

같은 기능을 ReactJS로 구현한 뒤에 장점을 파악해보고자 할 건데, 그 전에 React를 사용하기 위한 js파일을 import해야 한다. 아래의 두 링크를 import 한 뒤에 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>

 

2023.03.23
#2.2 Our First React Element
react를 사용해보는 첫 번째 시간이다. 실제 사용법보다 본질을 먼저 이해해보자. 앞으로 소개할 방법은 ReactJS를 사용하여 Element를 만드는 어려운 방법이다. 귀차니즘의 대명사인 개발자들이 절대 사용하지 않는 방식이지만, 처음이기도 하고 reactJs의 본질을 먼저 이해하기 위해 딱 한 번만 해보자

리액트를 import했기 때문에 createElement function을 가진 리액트 object에 접근 가능
const span 그러나 createElement(“span”) 은 반드시 생성하고자 하는 HTML 태그와 똑같아야함

React JS - 어플리케이션이 Interactive하도록 만들어주는 library. 엔진과 같다.
React-dom - library 또는 package. 모든 react element들을 HTML body에 둘 수 있도록 해 준다.
ReactDOM.render() - render의 의미는 react element를 가지고 HTML로 만들어 배치한다는 것. 즉, 사용자에게 보여준다는 의미
ReactDOM.render({태그 이름}, {배치할 위치})
-> 그래서 보통 body에 id=“root”인 div를 만들어서 span을 root 안에 둔다.

React.createElement({태그명}, {태그의 properties}, {태그 내부의 TEXT})
-> property는 class name, id도 가능 style도 가능

바닐라JS는 HTML에서 태그를 만들고 JS에서 가져와 가공을 한다.
리액트는 JS에서 태그를 생성하고 HTML에 엘리먼트를 배치하는 순서다.
JS가 element를 생성하고 React JS가 그것을 HTML로 번역하는 것
React JS는 업데이트 해야 하는 HTML을 업데이트 할 수 있음

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root"></div>
<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.querySelector("#root");
    const span = React.createElement("span", {id:"sexy-span", style: {color :'red'}}, "Hello i am a span"); /
    ReactDOM.render(span, root);
</script>
</body>
</html>

 

#2.3 Event in React

const root = document.querySelector("#root");
const span = React.createElement("h3",
    {
        id:'title',
        onMouseEnter: () => console.log('Mouse Enter')
    },
    "Hello I'm a span");
const btn = React.createElement(
    "button",
    {
        id:"btn",
        onClick: () => console.log("I'm Clicked"),
        style:{backgroudColor :"tomato"}
    },
    "Click me");
const container = React.createElement("div", null, [span, btn]);
ReactDOM.render(container, root);

두 가지 const를 render 하고 싶은 경우 div를 만든다
그리고 React.createElement("div", null, [span, btn]); 와 같이 배열을 만들어서 const를 넣어준다.

React에서는 addEventListner를 하는 것이 아니라 property에 eventListener 넣는다.
클릭 - {onClick: () => console.log("I'm clicked")}
마우스엔터 - {onMouseEnter: () => console.log("mouse enter")}

#2.5~6 JSX
JavaScript XML의 약자로 자바스트립트에 XML을 추가확장한 방법이다. 
사용한 코드를 직접 보자.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="root"></div>
<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.querySelector("#root");
    // CreateElement
    // const h3 = React.createElement(
    //     "h3",
    //     {
    //         id:'title',
    //         onMouseEnter: () => console.log('Mouse Enter')
    //     },
    //     "Hello I'm a span");
    // const btn = React.createElement(
    //     "button",
    //     {
    //         id:"btn",
    //         onClick: () => console.log("I'm Clicked"),
    //         style: { backgroundColor :"tomato"},
    //     },
    //     "Click me");
    // const container = React.createElement("div", null, [Title, Button]);


    // JSX
    function Title (){
        return (
            <h3 id="title" onMouseEnter={() => console.log('Mouse Enter')}>Hello I'm a span</h3>
        )
    }
    const Button = () => <button style={{backgroundColor :"tomato"}} onClick={() => console.log("I'm Clicked")}>Click me</button>
    const Container = () =>  <div>
        <Title /> <Button />
    </div>
    ReactDOM.render(<Container />, root);
</script>
</body>
</html>
<!-- 컴포넌트는 반드시 대문자로 시작! -->

createElement를 사용하는 방법과 비교하여 보자. 확실히 JSX가 간결하고 가독성이 좋은 것을 알 수 있다.
JSX에서 Title과 Button의 표현 방식이 다른데, 결국엔 같은 함수이다. 전자는 일반적인 function이고, 후자는 arrow function이라는 짧게 줄여쓰는 방법이다. 결론적으로는 같은 결과를 도출하기 때문에 참고하자.

컨테이너의 이름은 반드시 대문자로 시작해야 하며, 렌더링 하기 위해서는 < ~~ />의 형식의 컨테이너로 작성해야 한다.
컨테이너에 대한 정확한 개념은 다음 시간부터 알아보도록 하자.

저작자표시

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

nomadcorders_왕초보를 위한 React Native 101_Day2  (0) 2023.05.30
nomadcorders_ReactJS로 영화 웹 서비스 만들기_DAY4  (0) 2023.05.11
nomadcorders_왕초보를 위한 React Native 101  (0) 2023.05.10
nomadcorders_ReactJS로 영화 웹 서비스 만들기_DAY3  (0) 2023.05.09
nomadcorders_ReactJS로 영화 웹 서비스 만들기_DAY2  (0) 2023.03.24
Leo.K | To become a cooler Developer
프로필사진

티스토리툴바