[React] Component, JSX

Intro

버튼을 몇 번 클릭했는지 세는 어플을 바닐라 JS와 React JS를 사용해 구현해보고 비교
Component를 만들고 화면에 렌더링하기 ( JSX )

바닐라 JS 로 구현하기

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

document.querySeletor(selectors);

제공한 선택자와 일치하는 문서 내 첫번째 엘리먼트 반환한다.

const button = document.querySelector("button");

React JS 로 구현하기

React를 사용하기 위해서 두 개의 Javascript 코드를 import 한다.
react와 react-dom인데 둘의 차이는 밑에서 설명한다.

<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>

1. React JS로 Component를 생성하는 (어려운) 방법

React 규칙 하나. HTML을 이 페이지에 직접 작성하지 않는다.
대신에 Javascript와 React JS를 이용하여 element를 생성한다.

1. span 태그를 만들기 (createElement)

React의 createElement()로 span 태그를 만들것이다.
이때, 첫번째 인자(argument)에는 생성하고자 하는 HTML 태그 이름과 똑같이 써야한다.
두번째 인자에는 속성(property)(id, class, event listener 등)를
세번째 인자에는 내용(content)를 넣을 수 있다.

const span = React.createElement("span",null,"Hello I'm a span");

2. 페이지에 span 태그 넣기 (render)

이제 body에 root라는 id를 가진 div태그를 생성하고 그 안에 span 태그를 넣으려고 한다.
React에서는 ReactDOM.render()를 이용해 body 안에 React element를 가져다 둔다.
render는 React element를 가지고 HTML로 만들어 배치하는 것으로 사용자에게 보여준다는 의미를 가지고있다.

ReactDOM.render(span, root); // span을 root 안에 render 해라

여기까지 정리하자면, 우리는 React에서는 element를 만들기위해 React JS와 react-dom을 사용한다.
이 둘의 차이를 명확하다.

- React JS : HTML 생성. 어플리케이션이 interactive하도록 만들어주는 library. 즉, interactive한 UI를 만들어주는 엔진역할
- react-dom : 모든 React element들을 HTML body에 둘 수 있도록 해주는 library, package.

또한, React JS로 element를 생성하는 (어려운) 방법을 통해서 우리는 React가 기존의 방식에서 거꾸로 하고 있다는 것을 알 수 있게 되었다.

바닐라 JS : HTML 만들고 찾아서 Javascript로 가져와서 HTML 수정하고 다시 업데이트...
React JS : Javascript로 시작해 다음에 HTML이 됨. React JS과 HTML을 업데이트함.

3. component에 다른 component 넣기

먼저, span과 동일한 방식으로 button을 만든다. 이제 body에 넣을 태그가 2가지가 되었다.
그렇다면 span과 button을 모두 렌더링하기 위해서는 어떻게 해야할까?

container를 새롭게 만들어서 array를 둔다. span -> button 순으로 넣고싶다면 세번째 인자에 [span, button]을 넣고, container을 렌더링해주면 된다.

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

우리는 기본적으로 2개의 component를 가지는 component를 생성했다.

4. 이벤트 등록을 위해 component에 property 주기

React에서는 기존의 바닐라js에서 button을 가져와 addEventListener을 붙여 listener function을 만들던 방식을 대체하기 위해서 button에 property를 줄 수 있다.

밑의 코드는 간단하게 button 클릭 시 로그를 띄울 수 있다.

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

2. React JS로 element를 생성하는 (쉬운) 방법 - JSX

실제로 위의 createElement는 많이 사용되지 않는다. 보통은 더 쉬운, 편리한 도구로 대체되는데 바로 JSX다.

Introducing JSX – React

A JavaScript library for building user interfaces

reactjs.org

1. JSX로 컴포넌트 생성

위에서 createElement로 button을 만들었던 코드를 JSX로 수정하려고한다.
JSX는 HTML과 굉장히 비슷한 모양이다. 즉, HTML에서 태그를 정의하는 것처럼 쓰면된다.
2번째 인자였던 property는 마치 HTML 태그의 속성처럼 적으면 된다.
기억해야할 점은 JSX에서 자바스크립트를 사용하려면 중괄호를 넣어줘야한다.

    const Button = (
        <button
            style={{ backgroundColor: "tomato" }}
            onClick={() => console.log("im clicked")}>
            Click me
        </button>);

하지만 단순히 이렇게 JSX를 사용하려고 하면 에러가 발생한다. 이는 브라우저가 온전히 JSX를 이해하는게 아니기 때문인데 브라우저가 JSX를 이해할 수 있게 코드를 변환해주는 번역기를 따로 설치를 해줘야한다.

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io

Babel은 코드 변환기로 JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔주는 코드번역기이다.

Babel을 import해준 후 script 타입도 추가해주도록 한다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const Button = (
        <button
            style={{ backgroundColor: "tomato" }}
            onClick={() => console.log("im clicked")}>
            Click me
        </button>);
</script>

2. JSX로 컴포넌트 렌더링하기

위에서 컴포넌트에 다른 컴포넌트를 넣어 렌더링 해주었던 코드를 JSX로 바꾸려고한다.
컴포넌트에 다른 컴포넌트를 포함시키기 위해 가장 먼저해야할 것은 태그들을 함수로 만들어줘야한다.
함수형 컴포넌트를 정의하는 방식에는 2가지가 있다.

    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("im clicked")}>
            Click me
        </button>);

그 후 Title과 Button을 렌더링해주기 위해 코드를 추가해준다. 예를 들어, <Title />은 위에서 만들어준 Title 함수에 있는 코드를 복사한 것과 같은 의미를 가진다.
여기서 중요한 것은 우리가 만든 컴포넌트를 다른 곳에서 사용할 때는 항상 대문자로 시작해야한다는 것이다. 소문자로 적는다면 react와 jsx에서는 html 태그로 인식하게 된다. 이는 html 태그와 구별을 해주기 위함이니 꼭! 지키도록 하자.

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

저작자표시

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

[React] API 사용하기 (0)	2022.02.02
[React] 배열 State (0)	2022.02.02
[React] Effects (useEffect, clean-up) (0)	2022.01.29
[React] Props (Memo, Props Types) (0)	2022.01.28
[React] State (0)	2022.01.28

Intro

바닐라 JS 로 구현하기

document.querySeletor(selectors);

React JS 로 구현하기

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

티스토리툴바