[React JS] 리액트로 엘리먼트 만들기(안 쓰이는 방법)

Frontend/react.js

[React JS] 리액트로 엘리먼트 만들기(안 쓰이는 방법)

blueprint-12 2022. 3. 7. 20:05

리액트를 실행하기 위해서 2가지 import하는 것이 필요하다.

위치: <body></body> 여기에 임포트(body태그 뒤에)

React // React JS는 어플리케이션을 interactive하도록 만들어주는 library, 엔진같은 존재
react-dom // react-dom은 library 또는 package, React elemnet를 가져다가 HTML로 바꾸는 역할

▶아래는 리액트 임포트 예시

<body></body>
<!-- react cdn ver 17.0.2  and 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>
<script> // react codes <script>

▶제대로 임포트됐는 지 확인하는 방법: console에 react 쳐보기

콘솔에 react를 쳤을 때 나오는 결과물 이렇게 나오면 정상실행되는 것입니다.

※리액트 js로 엘레멘트를 만드는 방법은 어려운 방법과 쉬운 방법이 있다. 우선 어려운 방법을 위주로 만들고 그 뒤에 쉬운 방법에 대해서 알아볼 것

▶리액트 JS를 통해 엘리먼트를 만드는 어려운 방법 (외우지 않아도 됩니다.)

React.createElement( "html 엘리먼트명", { 속성: "속성값"}, 여러값 가능, "inner content ")
- 2번째 인자인 프로퍼티는 id나 class, event listener 등등이 될 수 있습니다.
- 만약에 속성을 지정하고 싶지않다면 null 을 넣으면 됩니다.
- e.g.)React.createElement("span", null, "I have no porperty here");
- 정확히 말하면 두번째 인자는 props가 포함된 object{}입니다.
reactDom.render(리액트 엘리먼트, 렌더 위치)
- render의미? react element를 가지고 HTML로 만들어 배치한다는 뜻

<body>
    <div id="root"></div>
  </body>
  <!-- react cdn ver 17.0.2  and react-dom -->
  <!-- 리액트를 실행하기 위해서 2가지 임포트 하는 것이 필요
    1. react 
    2. react-dom 
    제대로 임포트됐는 지 확인하는 법: console에 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>

  <script>
    const root = document.getElementById("root");
    //React.createElement("html엘리먼트명", {속성 : "속성값", 여러값 가능}, "inner content")
    const span = React.createElement(
      "span",
      { id: "sexy-span", style: { color: "red" } },
      "Hello I am a span!"
    );
    //리액트 돔을 사용하여 html엘리먼트 옮기기
    //render() 의미-> React element를 가지고 HTML로 만들어 배치한다는 뜻
    //심플하게 말하자면: show it(element) to the user 사용자에게 보여준다.
    //render(리액트 엘리먼트, 렌더 위치)
    ReactDOM.render(span, root);
  </script>

javaScript와 React JS를 사용하여 element 를 생성할 때는 React JS가 element를 생성한다. 즉, React JS는 업데이트가 필요한 element 를 업데이트한다. 바로 React JS가 결과물인 HTML을 업데이트할 수 있다는 것이다. -> React JS는 유저에게 보여질 내용을 컨트롤할 수 있다. 이전에 바닐라 js를 사용했을 때 우리가 HTML을 만들고 찾아서 가져오고 업데이트하는 형식으로 사용했다면 반대로 React를 사용하면 JS에서 시작하고, HTML에서 끝내는 것이죠.

JS가 HTML엘리먼트를 만들고 React JS가 그걸 HTML로 번역한다.

Event Listener 를 적용시키는 법

위의 코드와 이어지는 것으로 이 방법은 이해를 돕기위한 번거로운 방법입니다. 더 쉬운 작성법이 있음)

 <body>
    <div id="root"></div>
  </body>
  <!-- react cdn ver 17.0.2  and react-dom -->
  <!-- 리액트를 실행하기 위해서 2가지 임포트 하는 것이 필요
    1. react 
    2. react-dom 
    제대로 임포트됐는 지 확인하는 법: console에 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>

  <script>
    const root = document.getElementById("root");
    //React.createElement(1번째인자, 2번째인자, 3번째인자)
    // 여기서 2번째 인자로 property 를 줄 수도 있고 property에 event listener를 등록할 수 있다!
    const h3 = React.createElement(
      "h3",
      {
        id: "title",
        onMouseEnter: () => console.log("mouse enter"),
      },
      "Hello I am a span!"
    );
    const btn = React.createElement(
      "button",
      {
        style: {
          backgroundColor: "tomato",
        },
        onClick: () => console.log("I am clicked!"),
      },
      "Click me"
    );
    //ReactDOM은 container element를 root div 안에 render 
    const container = React.createElement("div", null, [h3, btn]);
    ReactDOM.render(container, root);
    //만약에 span과 btn 둘 다 렌더하고 싶다면 어떻게 하면될까?
    //1. React element div 를 생성하고 3번째 인자 값으로 배열을 준다.
    //2. 해당 배열안에 미리 만들어놓은 span, btn을 넣는다. (순서가 span -> btn순으로 렌더링되게)
  </script>
</html>

※계속해서 강조하자면 React.createElemenet() 방식은 거의 쓰이지 않습니다. 이후에 쉬운 방법에 대해 알아봅시다.

결과물: