React

React의 기본, JSX

sangchu 2023. 2. 11. 14:01

React JS 는 ui를 interactive(상호작용)하게 만들어준다.

 

Before React

<!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 += 1;
      span.innerText = `Total clicks ${counter}`;
    }
    button.addEventListener("click", handleClick);
  </script>
</html>

React를 사용하지 않고 바닐라 JS로 코드를 짠 경우를 보자.

(1)HTML을 만들고 (2)Javascript에 가져와 (3)event를 감지하고 (4)데이터를 업데이트한 뒤 (5)HTML을 업데이트한다.

계속 이런 방식으로 작업하면 복잡하고 비효율적이다.

 

React Element

이번엔 React JS로 element를 생성하는 방식으로 해볼 것이다. 이를 사용하기 위해서는 react, react-dom를 import해야 한다. React JS는 HTML을 직접 작성하지 않고 JS 코드를 사용한다.

    const root = document.getElementById("root");
    const text = React.createElement(
      "span",
      { id: "im-span", style: { color: "red" } },
      "Hello I'm a span"
    );
    ReactDOM.render(text, root);

react

엔진과 같은 역할이다.

 

React.createElement(생성하고자 하는 HTML 태그 이름, property, 내용)

요소를 생성한다. 지정할 property가 없으면 null을 넣으면 되고, props 안에 이벤트를 넣을 수 있다.
(property를 props라고도 말하나 보다)

 

react-dom

element를 HTML에 두는 역할이다.

 

render

React element를 가지고 HTML로 만들어 배치하여 사용자에게 보여주도록 한다.
첫번째 매개변수는 element, 두번째 매개변수는 HTML의 어디에 둘 지 정한다.

 

바닐라 JS와 React JS의 차이점

바닐라 JS는 HTML을 먼저 만들고, 그걸 JS로 가져와서 HTML을 수정한다.

React JS는 JS를 이용해 element를 생성하고 그것을 HTML으로 번역한다.

 

위 코드를 실행하면 다음과 같이 된다. html에 text element가 잘 들어간 것을 볼 수 있다.

import한 react, react-dom 코드 부분을 지우면, react를 사용할 수 없다.

 

Events in React

버튼을 만들고, 버튼에서 일어나는 event를 어떻게 감지하는 지 알아보자.

    const root = document.getElementById("root");
    const text = React.createElement(
      "h3",
      {
        id: "title",
        onMouseEnter: () => console.log("mouse enter"),
      },
      "Hello I'm a span"
    );
    const btn = React.createElement(
      "button",
      {
        onClick: () => console.log("click"),
        style: {
          backgroundColor: "tomato",
        },
      },
      "Click me"
    );
    const container = React.createElement("div", null, [text, btn]);
    ReactDOM.render(container, root);

React.createElement의 프로퍼티 부분에 event listener을 둘 수 있다.React JS에서는 event 이름 앞에 on을 붙여야 event listener인 것을 알 수 있다. event listener이므로 HTML 코드를 보면 프로퍼티에 없는 것을 볼 수 있다.

 

JSX

JSX는 createElement를 대체할 수 있는 방법으로, Javascript를 확장한 문법이다. 

HTML 문법과 흡사해서 주로 이 방식으로 코드를 작성한다. 

 

다음 두 코드는 같은 의미다. 두번째로 작성한게 JSX로 작성한 코드다.

const text = React.createElement(
      "h3",
      {
        id: "title",
        onMouseEnter: () => console.log("mouse enter"),
      },
      "Hello I'm a title"
    );

const text = (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        Hello I'm a title
      </h3>
    );

 

브라우저는 JSX를 모르므로 브라우저가 이해할 수 있는 형태로 바꿔줘야한다. 이 작업을 Babel이 해준다.

Babel 사이트에서 확인해 보면, 앞서 작성한 두번째 코드가 첫번째 코드로 변환한 것을 볼 수 있다.

이렇게 코드를 변환시키지 않으면, 브라우저는 코드를 해석을 할 수 없으니 아래와 같은 에러가 발생한다.

Babel을 사용하려면 babel 홈페이지 Set up에 나와있는 코드를 넣고, JSX를 작성한 script에 type을 text/babel로 설정해주면 된다. 그러면 이제 코드를 babel에 넘겨주고, 변환한 것을 html에 넣는다.

    const root = document.getElementById("root");
    const text = (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        Hello I'm a title
      </h3>
    );

...

서버를 실행해보면 JSX를 사용하지 않을 때와 동일하게 동작하는 것을 볼 수 있다.

 

이번엔 컴포넌트 안에 다른 컴포넌트를 넣는 법을 알아보자.

컴포넌트의 첫 글자는 반드시 대문자로 작성해줘야 한다. 만약 소문자면 React랑 JSX는 단순 HTML 태그라고 해석한다.

(위에 작성한 코드는 소문자로 작성해서 아래 코드부터는 변수명을 고쳤다.)

 

Container에 담아주려면 변수를 함수형태로 만들어야한다.

const Title = () => (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        Hello I'm a title
      </h3>
    );

그리고 나서 마치 일반적인 HTML 태그인 것처럼 포함시키면 된다.

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

서버를 실행하면 이전과 같게 동작하는 것을 확인할 수 있다.

 

전체 코드는 다음과 같다.

    const root = document.getElementById("root");
    const Title = () => (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        Hello I'm a title
      </h3>
    );
    const Button = () => (
      <button
        style={{
          backgroundColor: "tomato",
        }}
        onClick={() => console.log("click")}
      >
        Click me
      </button>
    );
    const Container = () => (
      <div>
        <Title />
        <Button />
      </div>
    );
    ReactDOM.render(<Container />, root);

 

 

 

참고 : NomadCoders - ReactJS로 영화 웹 서비스 만들기 강좌

'React' 카테고리의 다른 글

[JSCODE] React 2회차 심화미션  (1) 2023.02.14
[JSCODE] React 2회차 미션  (2) 2023.02.14
[JSCODE] React 1회차 미션  (1) 2023.02.10
[React] 동빈나 React 이론 - 5강 / React의 State(상태)  (0) 2022.08.07
[React] 동빈나 React 이론 - 4강 / React의 Component와 Props  (0) 2022.08.07

'React'의 다른글

  • 현재글React의 기본, JSX

관련글

티스토리툴바