React JSX란?

 

감사하게도 선배가 김민준 개발자님의 "리액트를 다루는 기술(개정판)" 책을 주셨다(정말 감사해요!)

오늘부터는 이 책을 공부하며 얻은 React 지식을 요약정리해볼 예정이다 :)

 

---

 

목차

 

 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;

 

import logo from './logo.svg';

import './App.css';

 

 

• Node.js : javascript 코드를 브라우저 밖에서 실행할 수 있게 해주는 환경
• 원래 JS는 웹 브라우저(크롬 등) 안에서만 동작했지만, Node.js 덕분에 서버나 데스크탑 앱에서도 실행될 수 있게 됨

 

• 참고로 원래 Node.js 에서는 import가 아닌 `require`라는 구문으로 패키지를 불러옴
• 하지만 브라우저나 ES6 표준에서는 import 문법을 사용해 모듈을 불러옴(즉, 환경에 따라 불러오는 방식이 다름)

 

• JS 파일이 많아지면서 이를 관리하기 위해 모듈 시스템을 사용하게 됨
• 하지만 브라우저는 ES6 이전까지 require(), import 와 같은 모듈 시스템을 직접 지원하지 않았음

 

• 이러한 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용함
• 번들러(bundler) : 모듈화된(파편화된) 자원들(파일들)을 하나의 파일로 묶어주는 것
• 대표적인 번들러로는 Webpack, Parcel, browserify 가 있으며, 리액트에서는 주로 웹팩을 사용함(편의성과 확장성이 높기 때문)

 

• 2017년 이후부터는 브라우저에서도 import를 사용할 수 있게 됐으나, 단순 다른경로의 자바스크립트를 불러오는 용도일 뿐 번들링과는 다름
• 파일을 불러오는 것은 웹팩의 로더(loader)라는 기능이 담당함
• 로더에는 여러 종류가 있는데 그 중 babel-loader는 최신 자바스크립트 문법으로 작성된 코드를 ES5문법으로 변환해줌
  
  • ES5 문법으로 변환하는 이유 : 구버전 웹브라우저와의 호환성을 높이고, JSX라는 문법을 사용하기 위해(JSX는 정식 JS 문법이 아님)
  • 원래 로더는 직접 설치해야하지만, create-react-app 에서 함께 설치되기 때문에 별도로 설치할 필요 없음

---

 

JSX란?

---

• 자바스크립트의 확장 문법이며 XML과 비슷하게 생김

// 원래 작성해야하는 코드
function App() {
  return React.createElement("div", null, "Hello", React.createElement("b", null, "react"))
}

// JSX 문법으로 간편해진 코드
function App() {
  return (
    <div>
      Hello <b>react</b>
    </div>
  );
}

 

 

---

 

JSX의 장점

---

• 보기 쉽고 익숙하다
• 활용도가 높다
  1. HTML 태그 사용 가능
  2. 컴포넌트 활용 가능