2023. 7. 20. 12:45ㆍ기술 창고/React
JSX란 Javascript를 확장한 문법입니다.
React에서는 이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등 렌더링 로직이 본질적으로 다른 UI 로직과 연결된다는 사실을 받아들입니다.
React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 “컴포넌트”라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다.
렌더링
예시 코드
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>JSX</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
<script src="../src/index.js" type="text/javascript"></script>
</body>
</html>
index.js
// React 렌더링을 사용하기 위해 React, React Dom 디펜던시 import
// import 방법 1
import React from "react";
import ReactDom from "react-dom";
// import 방법 2
var React = require("react");
var ReactDom = require("react-dom");
// ReactDOm을 사용하여 출력하는 방법 (JSX)
ReactDom.render(what to show, where to show);
ReactDom.render(<h1>Hello World</h1>, document.getElementById("root"));
// 일반 적인 javascript 로 출력하는 방법
var h1 = document.createElement("h1");
h1.innerHTML = "Hello World";
document.getElementById("root").appendChild(h1);우선 JSX라 함은 렌더링 로직, 함수를 사용하기 위한 확장된 문법이라고 볼 수 있습니다.
따라서, React에서 렌더링(JSX)를 진행하기 위해 1차적으로 react와 react-dom을 import 받아 React 앱 환경으로 만들어주어야 합니다.
import 하는 방법에는 대표적으로 2가지가 있습니다.
(1) import문 사용
import문을 사용하여 곧바로 변수에 디펜던시를 import 시키는 방법입니다.
- 양식 : import {변수명} from "{import할 디펜던시 명}"
(2) require 함수 사용
var이나 const 타입 변수에 require 함수를 사용하여 디펜던시를 참조시켜 import 하는 방법입니다.
- 양식 : var 혹은 const {변수명} = require("import할 디펜던시 명")
렌더링을 사용하기 위해서 React와 React Dom을 import 시켰다면 render 함수를 사용하여 HTML을 렌더링 시켜주면 됩니다.
렌더링 방식에도 대표적으로 2가지가 있습니다.
(1) render 함수 사용
render 함수를 사용하여 무엇을 어디에 렌더링 시켜줄 것인지 지정하여 렌더링할 수 있습니다.
- 양식 : ReactDom.render({무엇을(HTML태그 내용)}, {어디에});
(2) 일반 javascript 사용
createElement 함수를 사용하여 어떤 태그의 엘리먼트를 생성하고, innerHTML 명령어를 사용하여 해당 태그 엘리먼트에 내용을 넣어줍니다.
내용까지 넣어진 엘리먼트를 넣고자하는 영역에 append 시켜주어 노출되게 합니다.
- 양식 :
var {변수} = document.createElement("{특정 태그}");
{변수}.innerHTML = "{태그 엘리먼트에 넣을 내용}";
document.getElementById("{렌더링시켜 넣어줄 영역의 id 값}").appendChild({넣고자하는 태그});
하지만 render 함수를 사용하면 기본적으로 단일 태그 내용만을 넣어줄 수 있습니다.
하지만 단일 태그 내에 여러 태그 내용들을 넣어 줌으로서 렌더링할 수 있습니다.
index.js
import React from "react";
import ReactDom from "react-dom";
ReactDom.render(
<div>
<h1>Hello World</h1>
<p>This is a Paragraph</p>
</div>,
document.getElementById("root")
);
보면 render 함수에 전달할 태그 내용에 div 태그 안에 여러 태그를 넣음으로서 사실상 다중 태그지만 단일 태그처럼 사용하여 렌더링시킨 것을 볼 수 있습니다.
HTML 과 JS 간의 동일 영역 내에서 작성
javascript 언어를 HTML 안의 같은 영역에서 작성할 수 있습니다.
예시 코드
index.js
import React from "react";
import ReactDOM from "react-dom";
const name = "Sehun";
const player = "Messi";
ReactDOM.render(
<div>
<h1>Hello {name}!</h1>
<p>My Favorite Player is {player}</p>
<p>His Back Number is {5 + 5}</p>
<p>Play Together {`${name} ${player}`}</p>
</div>
,document.getElementById("root"));
render 함수를 사용하여 태그 내용들을 넣어주고 그 속에 js 변수로 설정된 변수들을 넣어주었습니다.
js의 변수들을 같이 사용하려면 {} 중괄호를 사용하여 그 속에 js 변수명을 넣어주면 됩니다.
숫자형 변수들을 활용하는 계산시을 중괄호 안에 넣음으로서 계산이 적용되어 반영될 수 있게도 가능합니다.
단순히 중괄호만을 사용하는 방법도 있지만, ES6 템플릿 리터럴을 이용할 수도 있습니다.
위의 코드 처럼 중괄호 내에 `(리터럴) 기호를 넣고 그 안에 다시 ${변수명} 형식으로 넣어 사용할 수도 있습니다.
다만 굳이 템플릿 리터럴을 사용하기 보단 그냥 일반적으로 중괄호만을 사용하는 것이 더 편리합니다.
'기술 창고 > React' 카테고리의 다른 글
| [React] Import, Export 사용법 (0) | 2023.07.21 |
|---|---|
| [React] React Component (컴포넌트) (0) | 2023.07.20 |
| [React] JSX 속성과 React CSS 스타일링 (0) | 2023.07.20 |
| [React] React란? (0) | 2023.07.20 |
| [React] S3 파일 불러오기 (0) | 2023.07.11 |