[React] React를 활용한 뮤비 리스트 만들기

1. 첫번째 movie list 만들기

일단 서버 부터 npm start로 열어주자.

jsx는 리액트 컴포넌트를 만들때 사용하는 언어 규칙은 상당히 심플하다.

jsx 의 예) 자바 스크립트 안의 html

      <div className="App">

        <header className="App-header">

          <img src={logo} className="App-logo" alt="logo" />

          <h1 className="App-title">Welcome to React KGH</h1>

        </header>

        <p className="App-intro">

          To get started, edit <code>src/App.js</code> and save to reload.

        </p>

      </div>

2. 이제 세가지 컴포넌트를 만들거다

- movie 리스트

- movie 카드

- movie 커버

컴포넌트를 각각의 파일에다가 구현할것이다.

app.js , app.css 모두 기본 내용들을 지워주도록하자

모든 컴포넌트는 render와 function을 가지고 있음

render는 뭔가를 보여주는 출력하는 기능

이 컴포넌트가 나에게 보여주는것이 무엇인가?

예) npm start 실행시 js 의 모든 코드를 가져와서 html파일에 담는데 이때, public 폴더에서 찾을 수 있음. (index.html)

3.  속성 검사할거다

이제 리엑트 홈페이지 속성을 검사해보면 

우리는 index.js파일을 만들고 있다.

ReactDOM이 render(출력한다)

index.js파일 내용 

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();

app.js는 눈에 보이는애들

한개의 컴포넌트를 render하고 있다는것이다. 지금 현재

app 컴포넌트 안에는 여러개의 컴포넌트를 만들 수 있지만 출력은 1개만 하고 있음

react은 UI 라이브러리(유저 라이브러리)

reactDOM 리액트를 웹사이트에 출력하는걸 도와주는 모델이다.

너가 리액트를 사용해서 웹사이트에 올려놓고 싶다? 그럴때는 reactDOM

리액트를 모바일앱에 올려놓고 싶을때는 reactNative를 사용한다.

결론,

리액트 = 라이브러리

리액트돔 = 라이브러리를 웹사이트에 출력해준다.

꼭 기억해야할것은?

리액트돔은 1개의 컴포넌트를 출력하고

그 다큐먼트안에 엘리먼트가 있는데 엘리먼트 ID는 root 인데, 이것은 index.html파일에 숨어있음.

4. 그럼 이제 우리가 컴포넌트를 만들어 보기로 하자!

App.js는 모든 영화 내용,정보를 넣을것이다.

새로 만든 파일 : new file->movie.js , movie.css

컴포넌트는 항상 render를 해야 한다.

가장 필수 기능은 render > return > JSX(리액트로 작성하는 html) 가 있다

* 아 movie 를 오타가 났는지 한참 오류 잡다가 이제잡았다....휴

 - Movie.js 파일

import React,{ Component } from 'react';

import './Movie.css';

class Movie extends Component{

    render(){

        return(

          <div>

              <MoviePoster />

              <h1> Hello World! </h1>

          </div>

        )

    }

}

class MoviePoster extends Component{

  render(){

    return(

      <img src="https://d2e111jq13me73.cloudfront.net/sites/default/files/styles/share_link_image_large/public/screenshots/csm-movie/the-hunger-games-ss1.jpg?itok=EFSm-KAL"/>

    )

  };

}

export default Movie;

Movie.css 파일 아무런 내용 없음

App.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;

출력 화면