react.js 이용법.

📌 React & ReactDOM

React를 사용하기 위해서는 먼저 React와 ReactDOM이라는 라이브러리가 필요하다.

React는 View를 만들기 위한 라이브러리이고,ReactDOM은 UI를 실제로 브라우저에 렌더링(컴퓨터에 그려줌) 할 때 사용하는 라이브러리이다.

React 와 ReactDOM은 아래와 같은 CDN(Cotnent Delivery Network) 링크 전송 방식으로 import 해줄 수 있다.

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

📌 JSX

jsx는 javascript 를 확장한 문법으로서, html tag 형식을 이용하여 코드를 작성할 수 있게 해준다.

// JSX 방식
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

// javascript 방식
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

하지만 jsx 로 작성한 코드는 브라우저가 완벽히 이해할 수 있는 문법이 아니기에, 브라우저가 이해할 수 있는 코드로의 변환이 필요하다.

이를 위해 BABEL이 필요하다.

📌 BABEL

babel 은 브라우저가 해석이 불가한 코드를 가능한 코드로 변환시켜주는 역할을 한다.이를 사용하기 위해 React, ReactDOM에서와 같이 CDN을 이용하여 추가해 준다.

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">

다음은 노마드코더 웹 서비스 만들기를 참조하며 작성한 코드이다.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Junsung`s Workspace</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <style>
    html {
      background-color: rgb(251, 188, 5);
    }
  </style>
</head>

<body>
  <!-- <script src="script.js"></script> -->
  <h1>Junsung`s Workspace </h1>
  <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.getElementById("root");
    function App() {
      let [counter, setCounter] = React.useState(0); // counter = 0, modifier = func // useState is a variable.
      const onClick = () => {
        setCounter(counter + 1)
      }
      return (
        <div>
          <h3>Total clicks: {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div >
      );
    }
    ReactDOM.render(<App />, root);
  </script>
</body>

</html>

https://ko.legacy.reactjs.org/docs/getting-started.html

'react.js' 카테고리의 다른 글

State. (0)	2024.03.17
Components / Props (0)	2024.03.16

쭌 코딩

react.js 이용법.

📌 React & ReactDOM

📌 JSX

📌 BABEL

'react.js' 카테고리의 다른 글

티스토리툴바

react.js 이용법.

📌 React & ReactDOM

📌 JSX

📌 BABEL

'react.js' 카테고리의 다른 글

'react.js' Related Articles

티스토리툴바