[React] 리액트 기본 사용 법과 JSX

Framework/React

[React] 리액트 기본 사용 법과 JSX

코린이예요 2018. 6. 17. 18:40

Hello, World! 를 출력하는 기본 HTML 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html><head>
  <meta charset="utf-8">
    <!-- 라이브러리를 읽어옴 -->
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
  </head>
  <body>
    <!-- 요소를 정의한다 -->
    <div id="root"></div>
    <!-- 스크립트 정의 -->
    <script type="text/babel">
      ReactDOM.render(
      <h1>Hello, world!</h1>, 
      document.getElementById('root')
      )
    </script>
  </body>
</html>
 
Colored by Color Scripter
cs

Codepen에서 작성할 경우 (* Javascript에서 React, React-DOM 라이브러리 반드시 추가)

HTML

1
<div id="root"></div>
cs

1
2
3
4
ReactDOM.render(
      <h1>Hello, world!</h1>, 
      document.getElementById('root')
      )
cs

- 불러온 라이브러리는 JSX라는 자바스크립트 확장 문법을 사용하기 위함이다. 해당 라이브러리들을 읽어오지 않으면 JSX를 사용할 수 없다.

- script type으로 "text/babel"를 명시해줌으로써 바벨을 이용하여 스크립트를 변환할 것임을 정의한다.

- 리액트에서는 DOM을 출력할 때 ReactDom.render()라는 함수를 사용한다. 첫번째 매개변수에는 랜더링 하고싶은 내용, 두번째 매개변수에는 출력 대상 DOM요소를 지정한다.

리액트와 JSX의 관계

JSX란

JavaScript XML의 약자로 React에서 주로 사용되는 언어이다. 자바스크립트 안에 HTML언어를 포함시켜 구현한다.

(* React를 사용할때 반드시 JSX를 사용해야 하는것은 아님)

예제 코드

1. JSX 태그 내부에 변수 넣기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html><head>
  <meta charset="utf-8">
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const item = "SD 카드"
      const value = 12000
      const msg = <h1>{item} - {value}원</h1>
      const elm = document.getElementById("root")
      ReactDOM.render(msg, elm)
    </script>
  </body>
</html>
 
Colored by Color Scripter
cs

Codepen에서 작성할 경우

HTML

1
<div id="root"></div>
cs

1
2
3
4
5
const item = "SD 카드"
const value = 12000
const msg = <h1>{item} - {value}원</h1>
const elm = document.getElementById("root")
ReactDOM.render(msg, elm)
cs

결과 화면

JSX로 HTML를 작성할 때에는 변수 및 함수를 태그 내부에 사용할 수 있다.

예를들어 <tag> value의 값을 넣고자 할때에는

<tag>{value}</tag> 와 같은 형식으로 작성한다.

2. JSX 태그의 속성값에 변수 넣기

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html><head>
  <meta charset="utf-8">
    <!-- 라이브러리를 읽어옴 -->
    <script src="https://unpkg.com/react@15/dist/react.min.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>
  </head>
  <body>
    <!-- 요소를 정의한다 -->
    <div id="root"></div>
    <!-- 스크립트 정의 -->
    <script type="text/babel">
        const title = "서예"
        const imgUrl = "http://uta.pw/shodou/img/28/214.png"
        const msg = <div>
        <h1>{title}</h1>
        <p><img src={imgUrl} /></p>
        </div>
        const elm = document.getElementById("root")
        ReactDOM.render(msg, elm)
    </script>
  </body>
</html>
 
Colored by Color Scripter
cs

JSX로 태그 속성값에 변수를 넣는 방법은 다음과 같은 형식으로 작성할 수 있다.

일반적으로 HTML에서 속성값을 넣는 방식인 <tag attr="value">가 아닌 중괄호를 사용한다.

Codepen에서 작성할 경우

HTML

1
<div id="root"></div>
cs

1
2
3
4
5
6
7
8
9
10
const title = "서예"
const imgUrl = "http://uta.pw/shodou/img/28/214.png"
 
const msg = <div>
        <h1>{title}</h1>
        <p><img src={imgUrl} /></p>
        </div>
      
const elm = document.getElementById("root")
ReactDOM.render(msg, elm)
cs

결과 화면

이 포스팅은 '모던 자바스크립트 개발자를 위한 리액트 프로그래밍' 책을 참고하였습니다.

저작자표시 비영리 동일조건