[ReactJS] Create Component with JSX

ReactJS 컴포넌트 만들기

1. movie_app 프로젝트 생성

# create-react-app movie_app

# cd movie_app

# npm start

1: CRA를 이용해 movie_app 이라는 앱 프로젝트를 생성한다.

2: npm start 명령어를 통해 생성한 App이 웹 브라우저에서 어떻게 보이는지 바로 확인할 수 있도록 내장서버를 실행시킨다. 

react-script 파일이 실행되는데 이 파일이 실질적으로 우리가 생성하고 작성한 리액트 앱을 실행시켜주는 것 같다.

※ CRA(create-react-app)로 생성한 React App의 디렉터리 구조

movie_app

├── README.md

├── node_modules/

├── package.json

├── .gitignore

├── public/

│   ├── favicon.ico

│   ├── index.html

│   └── manifest.json

└── src/

    ├── App.css

    ├── App.js

    ├── App.test.js

    ├── index.css

    ├── index.js

    ├── logo.svg

    └── serviceWorker.js

2. Movie Component

 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(<App />, document.getElementById('root'));

serviceWorker.unregister();

1: 'App'이란 컴포넌트를 id='root' 인 곳에 렌더링 시켜라.

index.js 파일에 실직적으로 리액트 앱과 HTML을 연결 시켜주는 코드가 담겨 있다.

ReactDOM

React는 UI 라이브러리인 반면, ReactDOM은 웹 브라우저에 리액트 App을 렌더링 하기 위한 것.

App.js

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

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

export default App;

App 이라는 커다란 컴포넌트 안에 Movie라는 작은 컴포넌트를 넣을 수 있다. 다만 3번째 줄과 같이 필요한 컴포넌트를 import 시켜줄 필요가 있다.

Movie.js

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

class Movie extends Component {
    render() {
        return(
            <MoviePoster />
        )
    }
}

class MoviePoster extends Component {
    render(){
        return(
            <img src="https://search.pstatic.net/common?type=u&size=100x133&quality=100&direct=true&src=https%3A%2F%2Fs.pstatic.net%2Fmovie.phinf%2F20190225_72%2F1551069530582h2huX_JPEG%2Fmovie_image.jpg%3Ftype%3Dw640_2"/>
        )
    }
}

export default Movie 

!!! 결과적으로 React에서 컴포넌트의 사용하기 위한 과정을 아래와 같이 나타낼 수 있겠다. 

Create Component -> Rendering ( return ) -> JSX -> View Web Browser

!필수

import React, {Component} from 'react';

* Tip. 컴포넌트를 각각의 id 값 없이 불러오는 것은 좋지 않다.