JSX? 그게 뭐지? > 리액트 react JJUM.COM

Concepts JSX? 그게 뭐지?

페이지 정보

본문

JSX?

JSX는 자바스크립트를 확장한 문법(=체계)으로 리액트 시스템의 존재이유? 뭐 그 정도 되시겠다.

그러니까 리액트 React는 JSX라는 방식으로 HTML(CSS)와 자바스크립트를 잘 섞어서 웹페이지(웹사이트)를 구현하는 것.

리액트에서 JSX 작성된 부분은 컴파일을 통해 자바스크립트로 변환된다.

리액트는 JSX는 물론 일반 자바스크립트도 포함해서 작성할 수 있다.

----------

기존 concepts.js의 내용을 다음처럼 변경한다.

import React from 'react';
import ReactDOM from 'react-dom';

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

function Concepts() {
  return (
    element
  );
}

ReactDOM.render(
  <Concepts />, 
  document.getElementById('root')
);

export default Concepts; 

결과화면

----------------------

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

const는 "상수"를 할당하는 키워드 (let은 "변수"를 할당하는 키워드)

name, element는 내 맘대로 정할 수 있다.

name이라는 상수에는 'Josh Perez'라는 문자열을 할당했고

element라는 상수에는 html 태그 문자열 그리고 name 상수의 값을 포함한 데이터를 할당했다.

name에는 Josh Perez가 들어 가겠지?

function Concepts() {
  return (
    element
  );
}

Concept() 함수에서 상수 element를 실행.

ReactDOM.render(
  <Concepts />, 
  document.getElementById('root')
);

Concepts 함수의 내용(여기서는 element 상수의 내용과 동일)을 root에 렌더링.

export default Concepts;   

모든 내용을 실행하는 완성 코드.

------------

참고 : 상수(const)는 변수(let)와 달리 동일한 상수에 다른 값을 할당할 수 없다.

그러니까

let name = 'Josh Perez'; 
name = 'Kim Mike';
const element = <h1>Hello, {name}</h1>;

이건 정상적으로 실행되지만 ("Hello, Kim Mike" 출력됨)

const name = 'Josh Perez'; 
name = 'Kim Mike';
const element = <h1>Hello, {name}</h1>;

요건 오류가 발생된다.

WARNING in src\concepts.js

Line 5:1: 'name' is constant no-const-assign