React-App.js 코드 살펴보기, JSX

App.js 살펴보기

import 

새로 만든 프로젝트의 App.js 코드를 먼저 봅시다

코드 맨 윗줄에 import문이 있습니다

import React, {Component, Fragment} from 'react';

Node.js는 코드를 모듈화하여 재사용합니다

npm으로 다른 사람이 만든 모듈을 설치할 수도 있고, 자체적으로 내장된 모듈도 많습니다

이렇게 설치된 모듈을 불러오는 코드는 다음과 같습니다

var fs = require('fs');

하지만 2015년에 공식 업데이트된 자바스크립트 문법 ES6에서부터는 import가 생겨서 이제는 이렇게 사용하면 됩니다

import fs from 'fs';

 

즉, App.js 맨 윗줄의 import React, ~ 부분을 이전 자바스크립트 문법으로 하면 다음과 같습니다

var React = require('react');
var Component = React.Component;

 

여기서 알아 둘 점은, 이렇게 파일을 모듈화하는 건 Node.js의 기능이지 웹 브라우저는 아닙니다

그래서 이런 특징을 웹 브라우저에서도 돌아가게 해주어야 하는데, 바로 번들링 도구를 이용하면 됩니다

 

번들링

번들링 도구에는 여러 가지가 있지만 리액트 프로젝트에서는 주로 webpack을 사용합니다

이런 번들링 도구는 import로 불러온 모듈들을 파일 하나로 합쳐 줍니다

한 마디로, src/index.js 부터 필요한 파일 전체를 파일 하나로 만듭니다

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

그래서 이렇게 SVG와 CSS파일도 webpack으로 불러올 수 있습니다

 

이렇게 파일을 불러오는 것은 webpack의 로더loader가 담당하는데,

이 로더를 직접 설치하고 설정하면 귀찮으니까 create-react-app이 대신 해줍니다(물론 직접 설정할 수 있습니다)

 

JSX

import React from 'react';
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를 보면 return 함수 내부가 마치 HTML을 작성한 것 같습니다

하지만 작은따옴표나 큰따옴표로 감싸지 않아 단순 문자열 템플릿도 아닙니다

이런 코드가 JSX입니다

 

JSX

JSX는 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼습니다

이런 형식으로 작성한 코드는 나중에 코드가 번들링되면서 babel-loader를 사용하여 자바스크립트로 변환됩니다

 

JSX의 장점

1) 보기 쉽고 익숙하다

일반 자바스크립트 문법으로 요소들을 일일이 만들면 뭔가 복잡해지는데,

JSX는 깔끔하게 HTML코드를 작성하는 것과 비슷하게 만들어서 가독성이 좋습니다

 

2) 오류검사

JSX에 오류가 있다면 바벨이 코드를 변환할 때 오류를 잡아줍니다(짝이 맞지 않는 괄호 등)

 

3) 더욱 높은 활용도

JSX에서는 div, span같은 HTML 태그를 사용할 수 있고, 그냥 HTML하듯이 작성하면 됩니다

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
    <App />,  document.getElementById('root')
);
serviceWorker.unregister();

index.js를 보면 App.js 안의 컴포넌트를 마치 HTML쓰듯이 작성하고 있는 걸 확인할 수 있습니다

 

ReactDOM.render

참고로 ReactDOM.render는 컴포넌트를 페이지에 렌더링하는 역할을 하며, react-dom 모듈을 불러와 사용합니다

첫 번째 파라미터는 페이지에 렌더링할 내용을 JSX형태로 작성하고,

두 번째 파라미터는 해당 JSX를 렌더링할 document내부 요소를 설정합니다

여기서는 id가 root인 요소 안에 렌더링 하도록 설정되었는데, 그 이유는 public/index.html 파일을 보면 알 수 있습니다

 

JSX 문법

감싸인 요소

컴포넌트에 여러 요소가 있다면 부모 요소 하나로 꼭 감싸야 합니다

import React, {Component, Fragment} from 'react';

class App extends Component {
  render(){
    return(
        <h1>리액트 안녕!</h1>
        <h2>당신은 어썸한가요?</h2>
    );
  }
}

export default App;

이러면 h1, h2가 따로 있어서 에러

 

import React, {Component, Fragment} from 'react';

class App extends Component {
  render(){
    return(
      <div>
        <h1>리액트 안녕!</h1>
        <h2>당신은 어썸한가요?</h2>
      </div>
    );
  }
}

export default App;

 

이렇게 해주어야 합니다

Virtual DOM이 변화를 찾을 때 효율적일 수 있도록 트리 구조를 유지해야 하기 때문입니다

 

Fragment

div같은 것으로 감싸지 않고 여러 요소를 렌더링 하고 싶다면 Fragment로 감싸면 됩니다

import React, {Component, Fragment} from 'react';

class App extends Component {
  render(){
    return(
      <Fragment>
        <h1>리액트 안녕!</h1>
        <h2>당신은 어썸한가요?</h2>
      </Fragment>
    );
  }
}

export default App;

 

결과물

 

className

div에 클래스 이름을 지정해줄 수 있습니다

 

App.css에 다음 코드 추가

.my-div{
  background-color: aqua;
  font-size: 15px;
}

 

App.js를 다음과 같이 변경

import React, {Component, Fragment} from 'react';
import './App.css';

class App extends Component {
  render(){
    return(
      <div className="my-div">
        <h1>리액트 안녕!</h1>
        <h2>당신은 어썸한가요?</h2>
      </div>
    );
  }
}

export default App;

 

결과

 

 

 

 

 

참고 도서: 리액트를 다루는 기술