본문 바로가기
반응형

React를 공부하기 시작했습니다. 아주 간단한 것부터 알게 된 것을 기록해 볼까 합니다. React는 프레임워크라기보다는 라이브러리라고 할 수 있습니다. 그렇기 때문에 기존의 HTML에 간단하게 React를 적용할 수 있습니다.

먼저 가장 기본적인 HTML은 아래와 같습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>그냥 HTML 기본 구성</title>
  </head>
  <body>
    <div></div>
  </body>
</html>

React.js 적용하기

react.js를 적용하기 위해서 먼저 react.js javascript CDN을 적용해야 합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React CDN 추가</title>

    <!-- CDN 추가 -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  </head>

  <body>
    <div></div>
  </body>
</html>

이제 이 HTML 문서는 React를 실행시킬 수 있습니다. 간단하죠? 한번 간단하게 적용해 보겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React CDN 추가</title>
    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  </head>

  <body>
    <!-- react가 나타날 위치 -->
    <div id="root"></div>
    <script type="text/javascript">
      // react가 나타날 위치에 h1 태그를 생성
      ReactDOM.render(React.createElement("h1", { style: { color: "blue" } }, "안녕하세요."), document.getElementById("root"));
    </script>
  </body>
</html>

먼저 react가 발현될 dev를 지정합니다. 보통은 id="root"를 많이 사용하나 바꾸어도 상관없습니다. 그리고 react 문을 작성합니다. react도 javascript이므로 javascript 형식으로 작성합니다.

<script type="text/javascript">
  ReactDOM.render(React.createElement("h1", { style: { color: "blue" } }, "안녕하세요."), document.getElementById("root"));
</script>

위의 구성은 React의 라이브러리를 사용한 것입니다.

  • ReactDOM.render(A, B); : A를 B에 표시해라라는 의미입니다.
  • React.createElement(A, B, C) : A Tag를 B의 속성으로 C의 내용을 넣어서 DOM을 만들라는 의미입니다.

그래서 위와 같이 적용을 하면 id="root" 위치에 <h1 style="color:blue" >안녕하세요.</h1>이 만들어집니다.

적용하는 것은 간단하죠?

다음 포스팅은 JSX를 적용하는 방법을 작성해 보려고 합니다.

UX 공작소

UX와 UI에 관해 내가 알게된 다양한 이야기를 공유해요~