[React] Movie app clone coding : Component 만들기

12 minute read
, , ,

React

우리가 사용하는 코드는 리액트이브로 자바스크립트 코드로 바꿔주는 툴이 필요. 이것을 트랜스파일러라고 한다. 트랜스파일러 중 하나가 웹팩.

웹팩은 리액트 코드를 브라우저가 이해할 수 있는 코드로 변경해주는 역할을 한다.

모든 브라우저가 ES6를 이해하지 못하므로 웹팩을 이용해서 최근 자바스크립트를 브라우저가 이해할 수 있게 변경해준다. (웹팩 = 모듈 번들러)

  • creat-react-app

웹팩과 같은 툴을 사용할 필요 없이 손쉽게 리액트 앱을 만들어주는 툴

React UI Components는 매우 독립적이며 특정 관심사에 집중된 기능 블록이다. 컴포넌트 기반 아키텍처(component-based architecture, CBA)는 일반적으로 일체형 UI에 비해 재 사용과 유지보수, 확장이 용이하다. 리액트는 템플릿 언어가 없는 순수한 자바스크립트를 기반으로 CBA를 구현해냈다.

<리액트 교과서 - 아자트 마르단, 길벗>

React 설치

 1> npm install -g create-react-app
 2> create-react-app movie_app
 3> cd movie_app
 4
 5Success! Created movie_app at /Users/jane/dev/movie_app
 6Inside that directory, you can run several commands:
 7
 8#  yarn start
 9    Starts the development server.
10
11#  yarn build
12    Bundles the app into static files for production.
13
14#  yarn test
15    Starts the test runner.
16
17#  yarn eject
18    Removes this tool and copies build dependencies, configuration files
19    and scripts into the app directory. If you do this, you can’t go back!
20
21We suggest that you begin by typing:
22
23  cd movie_app
24  yarn start
25
26Happy hacking!
27
28> cd movie_app
29> yarn start

총 4개의 scripts가 있다. : start, build, test, eject

이 강의에서는 start만 다룬다.

yarn start 를 입력하면 react-scripts 가 실행된다.

미리 설치된 개발서버(pre-built development server)가 시작되고, 컴파일이 성공적으로 완료되었다는 메시지를 볼 수 있다. 그리고 로컬 서버와 네트워크 IP주소를 확인할 수 있다.

1Compiled successfully!
2
3You can now view movie_app in the browser.
4
5  Local:            http://localhost:3000/
6  On Your Network:  http://172.30.1.21:3000/
7
8Note that the development build is not optimized.
9To create a production build, use yarn build.

react를 사용하는 큰 장점 중 하나는 configuration을 하지 않아도 된다는 것이다.

2-1. Creating React Components with JSX

Components 디자인

리액트는 컴포넌트에 기반하고 있다. 그러므로 만들 컴포넌트를 먼저 디자인한다.

  1. App (= movie list component) : 무비리스트 전체화면 컴포넌트
  2. movie (movie card) : 각각 영화 카드 컴포넌트. 영화에 대한 자세한 정보를 담고 있다.
  3. movie cover(image) : 영화 포스터 넣는 컴포넌트

컴포넌트는 각각 다른 파일에 작업한다.

JSX

아래와 같이 자바스크립트 안에 HTML이 자리잡고 있는 것을 JSX라고 한다.

 1import React, { Component } from 'react';
 2import logo from './logo.svg';
 3import './App.css';
 4
 5class App extends Component {
 6  render() {
 7    return (
 8        
 9//----------------- JSX -----------------
10      <div className="App">
11        <header className="App-header">
12          <img src={logo} className="App-logo" alt="logo" />
13          <h1 className="App-title">Welcome to React</h1>
14        </header>
15        <p className="App-intro">
16          To get started, edit <code>src/App.js</code> and save to reload.
17        </p>
18      </div>
19//-----------------------------------------
20    );
21  }
22}
23
24export default App;

JSX는 리액트 컴포넌트를 만들 때 사용하는 언어이다. 규칙은 매우 심플하다.

예를들어 , css의 class 가 아니라 className 이라고 쓴다.

이미지의 경우 src 에 logo 라고 쓰고 위에 해당 logo 가 정의된다.

Components

앱 컨포넌트를 살펴보면 각각 다른 functions과 methods를 갖고 있다.

💡모든 컴포넌트는 render function을 갖고 있다. 💡

  • render

render는 ‘뭔가를 보여주는, 출력하는’ 기능을 갖는다. ‘이 컴포넌트가 나에게 보여주는 것이 무엇인가’ 라는 게 render의 기능이다.

예를 들어, yarn start를 실행하면 JS의 모든 코드를 가져와서, html 파일에 담는다. 그 파일을 public 폴더에서 찾을 수 있다. public > index.html 이 파일이 react로 만들어진 파일이다.

 1// App.js
 2class App extends Component {
 3  render() {
 4    return (
 5      <div className="App">
 6        
 7      </div>
 8    );
 9  }
10}

아래 이미지에서 Hello react! 가 class = "App"에 들어가 있는데 index.html에 코드가 담겨있지 않고, App.js 에 담겨 있는 것을 확인할 수 있다. 즉, index.js에 파일을 만들고 있다.

index.js 는 react, reactDOM, css, 컴포넌트 ‘app’ 을 불러온다.

명령어를 살펴보면

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

ReactDOM이 render(출력)한다. App을. 그 컴포넌트를 render(출력)해야한다. id가 root인 곳에

root 는 index.html에 있다.

지금 하는 것은 컴포넌트 이름이 App인 한 개의 컴포넌트를 render 하고 있다는 것이다.

app 컴포넌트 안에 여러 개의 컴포넌트를 만들 수 있다. 하지만 출력은 한 개만 하고 있다.

**정리하면, reactDOM ReactDOM 은 1개의 컴포넌트 <App /> 를 render(출력) ReactDOM.render()하고, 그 document 안에 element가 있는데 element의 ID는 root document.getElementById('root') 이다. 이것은 index.html 파일에 숨어 있다 <div id="root"><div>. **

그래서 render를 하면 모든 컴포넌트들이 아래 영역에서 출력된다.

1<!-- index.html -->
2...
3<div id="root">
4    ALL COMPONENTS HERE
5</div>
6...

react와 reactDOM의 차이는 reactsms UI 라이브러리이다. reactDOM은 react를 웹사이트에 출력(render)하는 걸 도와주는 모델이다. react를 사용해서 웹사이트에 올리고 싶으면 reactDOM을 사용하면 된다. react를 모바일 앱에 올려놓고 싶으면 reactNative를 사용한다.

compenent 만들기

  • new file : src > Movie.js , src > Movie.css
  • App.js를 살펴보면 class, export 요소를 볼 수 있다.
1// App.js
2import React, { Component } from 'react';
3import './App.css';
4
5class App extends Component {   // class
6  ..........
7}
8
9export default App;   // export

동일하게 movie.js 로 가서 import react … 등을 작성한다.

 1// Movie.js
 2import React, { Component } from 'react';
 3import './Movie.css';
 4
 5class Movie extends Component {     // 컴포넌트는 항상 render 해야 한다는 것 기억하기!
 6  render() {
 7    return (
 8        <h1>Hello this is a movie!</h1>
 9    );
10  }
11}
12
13export default Movie;    // app.js로 해당 컴포넌트를 보냄

그리고 App.js로 가서 Movie.js를 연결하고 불러들이면 된다.

movie 컴포넌트를 App 컴포넌트 안에 레고 조각모음 처럼 집어 넣는 것이다.

 1// App.js
 2import React, { Component } from 'react';
 3import './App.css';
 4import Movie from './Movie';     // movie.js에서 보낸 컴포넌트를 연결
 5
 6class App extends Component {
 7  render() {
 8    return (
 9      <div className="App">
10        <Movie />      // Movie.js를 출력. Movie라는 컴포넌트를 불러오는 형태.
11      </div>
12    );
13  }
14}
15
16export default App;

정리하면,

  • 컴포넌트 생성 > render > return > html 입력, 불러오기 » 브라우저에서 확인
  • import react > class > RENDER (필수기능)

원하면 app.js에서 movie 컴포넌트를 여러 번 불러올 수 있다. 컴포넌트 각각의 id 없이 불러오는 것은 좋은 것은 아니다.

  • 복습 : app.js 안에 우리의 movie 컴포넌트가 위치하고, movie 컴포넌트 안에 실제로 영화 정보를 작성한다.

이미지 넣기

  • 순서 : Render > return > img src

Movie.js

 1// src > Movie.js
 2import React, { Component } from 'react';
 3import './Movie.css';
 4
 5class Movie extends Component{
 6  render() {
 7    return (
 8      <div>
 9          <MoviePoster />
10          <h1>Hello this is a movie!</h1>
11      </div>
12    )
13  }
14}
15
16class MoviePoster extends Component{
17  render(){
18    return(
19      <img src="https://upload.wikimedia.org/wikipedia/en/thumb/3/39/The_Hunger_Games_cover.jpg/220px-The_Hunger_Games_cover.jpg" />
20    )
21  }
22}
23
24export default Movie;

App.js

 1import React, { Component } from 'react';
 2import './App.css';
 3import Movie from './Movie';
 4
 5class App extends Component {
 6  render() {
 7    return (
 8      <div className="App">
 9        <Movie />
10        <Movie />
11        <Movie />
12        <Movie />
13      </div>
14    );
15  }
16}
17
18export default App;

큰 컴포넌트 안에 작은 컴포넌트를 집어 넣는 방식으로 작업한다.

아래 코드를 다시 보면 App 컴포넌트가 가장 크고, movie라는 작은 컴포넌트들이 있는 구조이다.

1// App.js
2class App extends Component {
3  .....
4        <Movie />
5        <Movie />
6        <Movie />
7        <Movie />
8  ....
9}

그리고 아래와 같이 Movie 컴포넌트 안에 제목과 Movie poster 컴포넌트가 있다.

1// Movie.js
2class Movie extends Component{
3     ....
4          <MoviePoster />
5          <h1> 제목 </h1>
6     ....
7}
8
9class MoviePoster extends Component{ ... }

📌 NOTE

  • 모든 컴포넌트는 무조건 RENDER 해야 하고, RETURN 해야 함
  • 컴포넌트 > Render > return > JSX

컴포넌트를 만들었으므로 다음으로 컴포넌트를 아름답게 만들고, 데이터와 연동, 리스트에 출력하는 작업이 필요하다.