[React.js] Start React! .02

[React.js] Start React! .02Front-End/React2020. 12. 8. 20:40@RyuWoong

Table of Contents

이번 장부터 React를 제대로 시작해보겠습니다.

자, 새로운 리액트 프로젝트를 만들어봅시다.

이전에 Ready to React .00 에서 만든 프로젝트를 사용하셔도 좋고 한 번 더 따라하셔서 새로 만드셔도 좋습니다.

React 파헤치기🤩

src/App.js 파일을 열어볼까요?

//src/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;

뭔가 독특하게 구성되어 있죠? 함수 안에 HTML이 들어있습니다. React는 JSX라고 불리는 확장된 자바스크립트 문법을 사용합니다.

위처럼 JSX로 작성된 파일은 Babel이라는 도구 덕분에 자바스크립트로 변환되어 빌드됩니다.

////App.js가 Babel을 통해 JavaScript로 변환된 return 이후 부분 중 일부.
return React.createElement('div', {className: 'App'},
  React.createElement('header', {className: 'App-header'},
  React.createElement('img', /* ... img children ... */))
);

짜잔! 신기하죠? React.createElement로 요소를 하나씩 만들어 냅니다. 위 JSX문법으로 작성된 것과 JavaScript로 작성된 것 중 어떤것이 가독성이 좋다고 생각하시나요? 아무래도 JSX문법으로 작성된 것이 가독성도 물론, 작성하기도 편하겠죠? 여기서 또 한가지, App.js 에서 React가 Import 되어 있는 이유를 볼 수 있습니다. 바로 Babel을 통해 JavaScript로 변환 했을때 React를 사용하기 때문입니다. 아래 React 공식홈페이지에서 JSX에 대해 설명이 잘 적혀있으니 한 번 읽어보고 가자구요!

Introducing JSX – React

A JavaScript library for building user interfaces

reactjs.org

Babel(바벨)이 뭔가요? 🤔

각자 다른 언어(TypeScript, ES6, JSX 등)를 사용하더라도, 모든 브라우저에서 동작이 가능하게 끔 만들어주는 도구입니다. 쉽게 말해, 사투리나 유행어 등을 표준어로 봐꿔주어 남녀노소 누구나 이해할 수 있도록 해주는 것이죠!
Babel 홈페이지

더 파헤쳐보기 😆

src/index.js 를 열어볼까요?

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

위 코드는 index.js 입니다. 코드를 하나하나 분석하면서 이야기해보겠습니다.

ReactDOM.render(Element, Container)입니다. React Component를 웹브라우저에 렌더링해주는 API입니다. Element로는 <React.StrictMode><App/><React.StrictMode>가 담겨있고 Container에는 document.getElementById('root')가 담겨있습니다.

root라는 이름의 id를 가진 곳에, 아까 보았던 App.js 내 App함수의 return에 작성된 HTML이 들어간다고 생각하시면 이해가 되시나요?

public/index.html 파일을 열어봅시다. 아래와 같이 작성되어 있습니다. (주석은 제거했습니다.)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root">
    	<!-- 작성되는 부분 -->
    </div>
  </body>
</html>

<div id="root"> </div>내에 index.js를 통해 연결되어 App.js가 들어가게 되는겁니다.

그 덕에 우리는 App.js 안에 컴포넌트를 추가하여 작성하면서 만들면 쉽게 React 어플리케이션을 만들 수 있습니다.

React.StrictMode는 뭔가요? ❗️

공식 홈페이지에 설명이 잘 나와있기에 아래 링크로 대체합니다. 쉽게 말해 개발모드에서 사용되는 점검도구입니다.

Strict 모드 – React

A JavaScript library for building user interfaces

ko.reactjs.org

repotWebVitals는 뭔가요? ❗️

현재 이 React 프로젝트의 성능을 측정해주는 도구입니다. CRA를 통해 프로젝트 생성시 포함되며, 아래에서 기능을 확인할 수 있습니다.

Measuring Performance | Create React App

By default, Create React App includes a performance relayer that allows you to measure and analyze

create-react-app.dev

간단하게 React 프로젝트 파일이 구성 되어 있는지 알아봤습니다.

다음은 React를 함수형으로 작성하는데 있어 필요한 여러가지 Hook에 대해 알아볼까합니다.

저작자표시 비영리 변경금지

'Front-End > React' 카테고리의 다른 글

[React.js] Hooks - useEffect .05 (0)	2021.01.05
[React.js] Hooks - useState .04 (0)	2020.12.20
[React.js] Check ES6 .03 (0)	2020.12.10
[React.js] Why React? .01 (0)	2020.12.06
[React.JS] Ready to React! .00 (0)	2020.12.02