[React_Nomadcoder]Movie_app 구조

1. index.html

여기서 확인 할 것은 <div id="root>이다.

App.js를 통해서 <div>엘리먼트에 render할 것이다.

2.index.js

ReactDOM.render는 HTML문서에 렌더링한다.

첫번째 인자에는 리액트객체인 <App />을 삽입한다는 내용이고

두번째 인자에는 getElementById('root')라는 HTML객체가 그 위치라는 뜻이다.

3.App.js

다음은 App객체를 정의하는 js파일이다.

class App extends Component를 통해 App이라는 객체를 만들었다.

그리고 리턴에는 App객체를 호출시에 HTML문서에 나타내고 싶은 것들을 리턴시킨다.

이 경우에는 div태그와 Movie태그(React객체)이다.

그리고 Movie태그에 속성값으로 title과 poster를 입력해주었다.

4.Movie.js

App에 호출된 Movie객체의 정의이다.

여기서 주의해야 할 것은

console.log에 찍힌 this.props와 this값이다.

this props는 Movie의 속성 중 정의되어진 각각의 title이 호출된다.

 반면 this에 호출되는것은 <Movie />객체이다.

리턴을 살펴보자

주의 깊게 볼 것은

두번째 헤드태그인

{this.props.title}이다.

이는 곧 Movie객체의 속성중 타이틀을 #text객체로써 <h1>에 맞춰 출력하겠다는 의미를 지닌다.

또 하나 살펴볼 것은 {this.props.poster}이다.

이 값을

MoviePoster객체에 바로 저장하면 defined값이 뜨는데

그 이유는 Movie의 객체가 poster지 MoviePoster의 객체가 poster는 아니기 때문임

고로 <MoviePoster poster ={this.props.pster} />로 속성을 지정해주어야 함!