본 시리즈는 같은 학원 수강생들과 함께하는 React 스터디 진행의 내용을 바탕으로 무작정 부딪치고 시간을 들여 얻은 지식을 공유하고자 한다.
학습 내용은 Do it! 리액트 프로그래밍 정석 교재를 기반으로 작성했다.
리액트는 어떻게 실행될까?
> yarn create react-app을 사용하여 만든 React 프로젝트의 구조
리액트는 전 시간에 작성한 글에 설명했듯이 Component들을 조립하여 화면을 구성한다.
src/index.js 파일은 React 서버를 구동할 때 최초로 실행되는 파일로 ReactDOM.render() 를 통해 App 컴포넌트를 출력하는 것을 볼 수 있다.
2번째 인자로 작성된 document.getElementById('root')는 public/index.html의
<div> id="root"></div>를 가리키며 App 컴포넌트를 해당 요소에 렌더링한다.
// src 폴더의 index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
// 출력할 root 컴포넌트
<React.StrictMode>
<App />
</React.StrictMode>,
// 두 번째 인자
// public 폴더 index.html의 id가 root인 요소에 컴포넌트를 출력
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();React가 어떻게 실행되는지 간략하게 알아보았으니 실질적으로 화면을 그릴 수 있는 JSX 문법에 대해 알아보자.
JSX
JSX란?
리액트에서 컴포넌트 렌더링을 위한 문법으로 JSX를 사용한다. JSX 란 JavaScript XML의 줄임말 자바스크립트 안에 XML 문법을 작성할 수 있는 편리한 문법이다. XML에서 요소를 작성할 때 종료 태그를 사용해야 하므로 JSX 에서도 꼭 종료 태그를 작성해야 하는 것을 기억하자.
import React from 'react';
function App() {
return (
// JSX
// 꼭 '/' 를 사용하여 종료 태그를 작성해야 한다.
<div>
<input id="text" type="text" />
<div>Hello, React!</div>
</div>
);
};
export default App;기존에 HTML을 작성할 때 <input> 등 하나의 태그로 작성할 수 있는 요소는 /> 같은 종료 태그를 붙이지 않아도 정상적으로 화면을 그렸지만 JSX에서는 렌더링하지 못 한다.
🚨 리액트의 컴포넌트의 JSX는 항상 최상위 태그로 감싸져 있어야 한다.
return ( <div>Hello,</div> <div>React</div> );와 같이 작성하면 오류가 발생한다.
return ( <div> <div>Hello,</div> <div>React</div> </div> );이런 식으로 작성해야 한다.
JSX의 작동 원리
JSX가 리액트에서 어떻게 작동하는지 알아보자. 웹 브라우저는 기본적으로 HTML, Javascript, CSS를 기반으로 구동되기 때문에 JSX 파일을 자바스크립트로 변환해야 한다. 그래서 리액트 엔진은 JSX을 자바스크립트로 변환하여 출력한다. 예를 들어 위에 작성한 JSX 코드는 아래와 같이 변환되어 웹 브라우저에서 구동하게 된다.
...
return (
React.createElement(
"div",
null,
React.createElement("input", {
id: "text",
type: "text",
}),
React.createElement(
"div",
null,
"Hello, React!"
)
)
);리액트 엔진은 JSX를 분석하여 자바스크립트 코드로 변환한다. React.createElement() 함수는 리액트 엔진의 함수이며 기존 자바스크립트의 document.createElement() 함수를 사용하여 객체를 생성한다. 실질적으로 리액트를 사용하여 개발할 때는 위의 과정을 몰라도 되므로 이런 것이 있다고 알아두기만 하자.
