컴포넌트를 다시 복습해보자 




Component 안에 Component 또 그안에 Component를 넣는 방식이다 . 


영화이미지와 영화 제목을 반복해서 만들고 싶다. 어떻게 해야할까 ~ 


Movie 컴포넌트를 만들어서 영화 제목을 넣어두고 MovieImage 컴포넌트를 만들어서 Movie 컴포넌트에 넣어주고 


최종적으로 Movie 컴포넌트를 APP에다 넣어주면 된다. 


Movie.js 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, { Component } from 'react';
 
class Movie extends Component {
    render() {
        return (
            <div>
                <MovieImage />
                <h1>영화 제목</h1>
            </div>
        );
    }
}
 
class MovieImage extends Component{
    render() {
        return(
            <div>
                <img src="http://www.newsinstar.com/data/photos/20180937/art_15367158497873_e15bff.jpg" />
            </div>
        );
    }
}
 
export default Movie;
cs



MovieImage.js 


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


<Movie />
        <Movie />
        <Movie />
        <Movie />
        <Movie />


5번 반복해주니 같은 화면이 5번 반복해서 출력된다.  페이스북처럼 카트방식은 이런식으로 반복 해서 만들어지는 것이다.  참 페북 개발자들 대단한듯 ㄷㄷㄷㄷ



저작자표시 비영리

'웹 프론트엔드 > React' 카테고리의 다른 글

13. React/리액트 array.map 이해하기  (0) 2018.11.04
12. React/리액트 (props) 복습하기  (0) 2018.11.03
10. React / 리액트 (props 와 state)  (0) 2018.10.27
9. React / 리액트 (스타일 CSS 적용하기)  (0) 2018.10.23
8. React / 리액트 (조건부 렌더링)  (0) 2018.10.23

+ Recent posts

티스토리툴바