JSX? 그게 뭐지? > 리액트 react

리액트 react

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;


결과화면 

71f20cb486ee19431535b7fef15987c2_1648804575_9141.png
 


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


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