From a28da2451a292d800e0ddf6349b87bc531c2b58f Mon Sep 17 00:00:00 2001 From: Tanney Date: Tue, 2 Nov 2021 20:41:13 +0900 Subject: [PATCH] =?UTF-8?q?create:=20jsx=20=EB=82=B4=EC=9A=A9=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/jsx.md | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) create mode 100644 react/jsx.md diff --git a/react/jsx.md b/react/jsx.md new file mode 100644 index 0000000..71c0c2e --- /dev/null +++ b/react/jsx.md @@ -0,0 +1,70 @@ +## 결론 + +
+ +JSX는 자바스크립트에 XML 문법을 추가해 쉽게 리액트 엘리먼트를 표현하도록 확장한 문법이다. + +
+ +## 설명 + +
+ +### 1. XML이란? +- eXtensible Markup Language +- HTML과 유사하게 태그 문법을 사용 +- HTML의 목적이 정보를 화면에 어떻게 표현할지 미리 정의된 태그로 나타내는 것이라면 XML의 목적은 태그 이름을 통해 데이터를 그룹화하고 구조화 하는 것이다. +- 예시 + ```xml + <애플> + <스마트폰>아이폰 + <태블릿>아이패드 + <노트북>맥북 + + <삼섬> + <스마트폰>갤럭시 + <태블릿>갤럭시탭 + <노트북>갤럭시북 + + ``` + +
+ +### 2. JS를 어떻게 확장할까? +- JSX에서는 태그를 통해 리액트 엘리먼트를 나타낸다. +- JSX 파서는 태그 안의 정보를 이용해 React.createElement를 호출한다. + - 태그의 첫 단어는 type인자로, 태그로 감싼 부분은 children으로 그 외 나머지는 props인자로 취급된다. + ```jsx + + some text + + + // 위 태그는 아래 표현과 동일하다. + + React.createElement(elementType, { prop1: "prop1", prop2: "prop2" }, "some text"); + ``` +- 이때, 각 태그는 XML 문법이기에 사용자가 임의로 정의해 사용할 수 있다. 단, 기존 HTML 태그도 함께 지원한다. 이를 동시에 지원하는 방법은 다음과 같다. + - 태그의 첫 단어가 소문자로 시작한다면 이는 문자열로 해석된다. + - 태그의 첫 단어가 대문자로 시작한다면 이는 식별자로 해석된다. + ```jsx +
+ // parse + React.createElement("div"); + + const Span = "span" + + // parse + React.createElement(Span); + // Span === "span"이므로 + React.createElement("span"); + ``` +- 위와 같은 성질을 이용해 기존 html 태그를 사용할때는 소문자, 사용자 정의 컴포넌트를 사용할 때는 대문자를 사용한다. + +
+ +## 요약 + +
+ - JSX는 자바스크립트에 XML 문법을 추가해 확장한 문법이다. + - JSX에서 태그는 리액트 엘리먼트를 나타낸다. + - JSX에서는 주로 html 태그를 나타낼때 소문자, 컴포넌트를 나타낼 때 대문자로 시작하는 태그이름을 사용한다. \ No newline at end of file