[React] 2. React에서 JSX란?

• JSX 란?

  • Javascript + XML 이 합쳐진 자바스크립트의 확장 문법이다. 개발자가 자바스크립트 내부에 마크업 코드를 작성할 수 있도록 해준다. JSX 문법에서는 java, c++과 유사하게 카멜케이스를 사용한다. 

  • 리액트의 컴포넌트는 항상 렌더링을 수행하며. render() 함수가 렌더링할 요소(element)를 반환하는데 이때 JSX문법을 사용할 수 있다. 

  • JSX에서는 중괄호{}를 이용하여 자바스크립트(JavaScript) 구문을 실행할 수 있다. 이러한 중괄호는 속성의 값으로도 들어갈 수 있다는 점에서 사용이 편리하다. 

  • 특징 및 주의할 점 

    • jsx 문법에서는 여러개의 요소가 들어갈때 전체 요소를 감싸주는 태그가 없으면 오류가 발생한다. 1개 이상의 요소가 사용될 때는 아래 코드의 <main>과 같이 감싸주는 태그가 반드시 필요하다.

function App() {
  return (
    <main>
      <Show name="모모"/>
      <Show name="춘도르"/>
      <Show name="빅룡"/>
    </main>
  )
}

---

codepen 편집기(https://codepen.io/)로  JSX를 사용한 예제를 작성해보자.

 

• html

<div id="root"></div>

• css

.blue {
  color : blue;
}
.red {
  color : red;
}

• js

function formatInfo(student) {
  return student.name + "[" + student.id + "]"; 
}
const student = {
  id : "20120102",
  name : "Jeongha Park",
  color : 'blue'
}
const element = (
  <h3 class={student.color}>
    {formatInfo(student)} 
  </h3>
);

ReactDOM.render(element,document.getElementById('root')) 

• js 코드설명

const element = (
  <h3 class={student.color}>
    {formatInfo(student)} 
  </h3>
);

{ } 중괄호와 같은 문자가 바로 JSX문법에 해당한다. 

중괄호 안에서 javascript 코드를 사용 가능하다. 중괄호를 쓰지않으면 그냥 html 코드로 인식한다. 

이전 포스팅에서 설명했던 babel (JavaScript Preprocessor) 이 JSX 로더를 가지고 있어서 해당 문법이 동작 가능하다.  

html 문서와 javascript 언어가 함께 공존할수 있도록 해주는것이 JSX 이다.

 

ReactDOM.render(element,document.getElementById('root')) 

ReactDOM은 화면에 내용을 그려주는, 즉 렌더링하는 역할을 수행한다. 

첫번째 parameter로는 위와 같이 element, 컴포넌트 element 혹은 변수를 넣어준다.

ReactDOM 은 렌더링을 수행하기 전에 JSX {} 중괄호에 포함된 내용을 이스케이프 처리하기 때문에  XSS(Cross Site Scripting) 과 같은 공격으로 부터 안전하다. 

요소를 렌더링하는 것이 매우 간단하며, 일반적인 브라우저의 돔 객체와 다르게 가볍고 강력하다. 

---

ReactDOM이 얼마나 효율적인지 현재 시각을 표출하는 예제를 하나 더 작성하여 확인해보자.

 

• html

<div id="root"></div>

• css

.blue {
  color : blue;
}
.red {
  color : red;
}

• js

//함수형 컴포넌트
function tick(){
  const element = (
    <h3>현재 시각은 [{new Date().toLocaleTimeString()}] 입니다.
      </h3>
  );
  ReactDOM.render(element, document.getElementById('root'))
}

setInterval(tick,1000); //1초에 한번씩 tick함수를 수행

 

• js 코드설명  : setInterval 함수로 인해 1초에 한번씩 tick함수가 수행된다. 이 tick함수 내부에서 ReactDOM.render 함수가 호출되고 시각에 해당하는 부분만 현재시간으로 변경되어 화면이 리렌더링 되는 것을 확인할 수 있다.

 

• 참조 강좌 및 블로그 출처

  YouTube 동빈나 [React JS 이론부터 실전까지] 강좌, https://ndb796.tistory.com/202 [안경잡이개발자]