ReactJS_2_컴포넌트

1. 개념

Component는 React를 구성하는 기본 요소이며, Render를 통해 보여준다.

npm이 start되면 이러한 js에 있던 컴포넌트가 컴파일 되어 html 파일이 되어 출력된다.

만들어지는 html 파일이 public 폴더 내에 생성되는 것이다.

 

여기서 ReactDOM은 웹으로 출력하도록 도와주는 것이고

ReactNative는 모바일로 출력하도록 도와준다.

 

2. 영화앱

우리는 영화 소개 페이지를 만드는 것을 목표로 한다.

그를 위해 3 가지 Component가 필요하다. 

 

movie_list component
movie component
image_component

 

이 때 JSX라는 언어를 사용할건데 이는 React Component 를 만들때 사용하는 언어이다.
특별한 규칙도 따로 없고 html 처럼 사용하면 된다.

 

/src/App.js

ClassName="App"이하 모든 내용 삭제

/src/App.css

.App을 제외한 모든 내용 삭제, App내도 삭제

 

/src/Movie.js, Movie.css 파일 생성

/src/Movie.js

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

class Movie extends Component{
    // Component는 Render를 통해 출력
    render(){ 
        return(
            <div>
            	// 같은 파일 내 컴포넌트 삽입(div로 묶어줘야 한다)
                <MoviePoster /> 
                <h1>hello this is a movie</h1>
            </div>
        )
            
    }
}

class MoviePoster extends Component{
    render(){
        return(
            <img src="https://cdn-apply.likelion.org/static/imgs/basiclogo_E_V.png" alt=""/>
        )
    }
}

export default Movie 

/src/App.js

import React from 'react';
import './App.css';
import Movie from './Movie.js';

function App() {
  return (
    <div className="App">
      <Movie />
      <Movie />
      <Movie />
    </div>
  );
}

export default App;