01. JSX에 대하여
2651 단어 JavaScriptReactJSXJSX
JSX (JaveScript XML) 는 리액트(React)로 프로젝트를 개발할때 사용하는 문법이다.
JavaScript에 XML을 추가 확장한 문법으로 공식적인 바닐라 자바스크립트는 아니지만 자바스크립트의 모든 기능이 포함되어있는 문법이다.
리액트(React)는 웹프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기위해 사용된다.
출처: 리액트 (웹 프레임워크) - 위키백과, 우리 모두의 백과사전) 22.01기준
HTML과 비슷해
렌더링 로직 ( 표현할 데이터를 받아오는 로직 ) 과 UI 로직(받아온 데이터를 UI로 만드는 로직)
Markup Language ( 간단히 문서나 데이터 구조를 표현하는 언어의 한가지이다)이므로 UI로직(받아온 데이터를 UI로 만드는 로직)을 시작적으로 이해하기 쉽게 표현을 할수있다.
작성하는방법은 자바스크립트 문법과 동일하게 작성하면된다
* JSX 문법규칙
1. 요소를 감싼다.
Component 에 여러요소가 있다면 반드시 부모요소로 감싸야하며, return을 기준으로
위로는 Javascript 문법을 아래는 HTML 태그를 작성하면 된다.
export default function Page() {
return (
<div>
<title> Hello World!</title>
</div>
)
}
2. 자바스크립트 표현이 가능하다.
자바스크립트식은 중괄호 {}를 사용하여 JSX안에 쓸수있다.
<h1>{1+2}</h1>
//위의 예시는 다음과 같이 렌더링된다.
<h1>3</h1>
Author And Source
이 문제에 관하여(01. JSX에 대하여), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@sol_reshur/01.-JSX에-대하여저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)