[React] 2. 리액트에서 JSX란? | 민민의 하드디스크 - 티스토리

리액트 소스 코드 이해하기
및
JSX에 대해

 

1. App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

기본적으로 제공되는 App.js 코드이다.

리액트는 얼핏보면 파이썬 같기도 하지만 자바스크립트 라이브러리이다. 

• import: 다른 파일들을 불러와서 사용할 수 있으며, 원래 브라우저에서는 없던 기능이며 Node.js에서 지원하는 기능이다.
• function App(): 기본적으로 function은 함수라고 하는데, 위 코드에서는 함수의 return(반환) 값이 HTML인 마크업 언어처럼 보인다. 하지만, HTML이나 문자열 템플릿이 아닌 JSX라고 부른다.
  
  ※ JSX: 자바스크립트 확장 문법이며 XML과 비슷하다. 브라우저에서 실행되기 전에 자바스크립트 형태의 코드로 변환되는 과정을 거친다.
  
  

JSX 예시 코드

function App(){
	return(
    	<div>
        	Hello <b> World </b>
        </div>
    )
}

위 코드를 실행시키면 아래의 코드로 변환된다.

 

변환된 코드

function App(){
	return React.createElement("div",null,"Hello", React.createElement("b",null,"World"));
}

 

 

JSX의 장점

1. 가독성: 위 코드를 보면 잘 정리되고 가독성이 높다. HTML과 코드 작성방법이 비슷하니, 쉽게 느껴지기도 한다.

2. 활용성: HTML에서 사용되는 태그를 쉽게 사용하여 넣을 수 있다. 프론트엔드 개발자가 리액트를 금방 배우고 활용하기 쉬운 이유 중 하나이다.