만들면서 배우는 리액트 튜토리얼 - 2.JSX

by - August 15, 2018

Image result for jsx

1.     JSX

JSX는 리액트 컴포넌트를 만들 때 사용하는 언어이다.

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;
JSX의 예시

위의 사진이 기본적인 JSX의 예시이다.


1.1. render()

render(): 이 컴포넌트가 나에게 보여주는 것

리액트에서 모든 컴포넌트는 render function을 갖고 있어야 하고 이를 return해주어야 한다.



1.2. JSX의 실행과정

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

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
index.js


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>Movie App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root">
      All your components here
    </div>
  </body>
</html>
Index.html



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

class App extends Component {
  render() {
    return (
      <div className="App">
        Hello!
      </div>
    );
  }
}

export default App;

app.js


리액트의 실행과정을 알아보면

터미널에서 yarn start를 하면 리액트는 JS의 모든 코드를 가져와서 html 파일에 담는다.

그 파일이 실제로 실행되는 파일이고 이 파일이 바로 public 폴더에 있는 index.html 파일이다.


index.html파일은 index.js파일을 변경함으로써 수정할 수 있는데

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

위 코드에서 index.js의 ReactDom은 App이라는 1개의 컴포넌트를

document(index.html) 안에 있는 id가 root인 element를 찾아서 에 출력한다.

이 element는 index.html파일에 <div id=”root”>라는 형태로 숨어있다.

<div id="root">
    All your components here
</div>

App.js는 위에서 출력하는 1개의 컴포넌트이다.<App />).


정리하자면 index.js내의 ReactDOM이 DOM과 JSX를 연결하는 

중개자 역할을 한다고 보면 된다.

1.3. React vs ReactDOM

React: UI Library
React DOM(Document Object Model): 리액트를 웹사이트에 출력(render)하는 걸 도와주는 모델

1.4. JAX 샘플 프로젝트 작성

import React, { Component } from 'react';
import './Movie.css'; // 선택사항

class Movie extends Component {
  render() {
    return (
      <div>
        <MoviePoster/>
        <h1>hello this is a movie</h1>
      </div>
    )
  }
}

class MoviePoster extends Component {
  render() {
    return (
      <img src="https://m.media-amazon.com/images/M/MV5BMTM0NjQ4OTgyNV5BMl5BanBnXkFtZTcwOTU2MzQ4Nw@@._V1_.jpg"/>
    )
  }
}

export default Movie
Movie.js


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

class App extends Component {
  render() {
    return (
      <div className="App">
        <Movie />
        <Movie />
      </div>
    );
  }
}

export default App;
App.js

1.5. JAX 정리

기본적으로 리액트는 큰 컴포넌트 안에 작은 컴포넌트를 집어 넣는 방식이다.

위의 샘플 프로젝트에서는 App 컴포넌트가 최상위 컴포넌트이고 

그 안에 Movie라는 작은 컴포넌트가 들어 있고

그 작은 컴포넌트 안에 MoviePoster라는 더 작은 컴포넌트가 들어가 있는 형식이다.


즉, 리액트의 모든 것은 컴포넌트로 되어있고


모든 컴포넌트는 무조건 Render하고 return해야 한다는 것을 기억하자.

Share
Tweet
Pin
Share
Tags :

You May Also Like

0 comments