Props는 상태  상태에서 가장중요한것은  부보 즉 상위에서부터 하위로 값을 넘겨준다


고로 App -> Movie -> MovieImage 순으로 ~


APP에 영화 제목과 이미지를 설정하고 화면에 출력해보자


* 참고로 문화생활을 하지 않는 나에겐 특정 영화와 관련이 없음 .. 


App.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
25
26
27
28
29
30
31
32
33
34
35
36
import React, { Component } from 'react';
import './App.css';
import Movie from './Movie';
 
const title = [
    "완벽한 타인",
    "보헤미안 랩소디",
    "창궐",
    "암수살인",
    "미쓰백"
]
 
const poster = [
  "http://www.newsinstar.com/data/photos/20180937/art_15367158497873_e15bff.jpg",
  "http://image.cine21.com/resize/cine21/poster/2018/0518/12_06_54__5afe434e1f297[H800-].PNG",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9te4ZPkCjmfMbzua__AogoVkO8_pSQg_k9HLioQM6B2lPPnix7w",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTKpaFaBzed4mShvSJPVD2vQf4W618DFT8OFa-KNAPTuJLTWi5x",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT53iAJpVivS5RAVVNB_MoEs_a6sTOcbv2tA2XhNgz6ovcj6Yeq"
]
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <Movie title={title[0]} poster={poster[0]} />
        <Movie title={title[1]} poster={poster[1]} />
        <Movie title={title[2]} poster={poster[2]} />
        <Movie title={title[3]} poster={poster[3]} />
        <Movie title={title[4]} poster={poster[4]} />
      </div>
    );
  }
}
 
export default App;
 
cs

Movie.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { Component } from 'react';
 
class Movie extends Component {
    render() {
        return (
            <div>
                <MovieImage poster={this.props.poster}/>
                <h1>{this.props.title}</h1>
            </div>
        );
    }
}
 
class MovieImage extends Component{
    render() {
        return(
            <img src={this.props.poster} />
        );
    }
}
 
export default Movie;
cs



각각 이미지에 맞는 제목이 잘 출력됨 



저작자표시 비영리

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

1. react API를 활용하여 영화 순위 보여주기  (0) 2019.02.06
13. React/리액트 array.map 이해하기  (0) 2018.11.04
11. React/ 리액트 (컴포넌트 복습)  (0) 2018.11.03
10. React / 리액트 (props 와 state)  (0) 2018.10.27
9. React / 리액트 (스타일 CSS 적용하기)  (0) 2018.10.23


JSX에 DOM 요소를 렌더링 하는 하는 방법 중 


스크립트 표현식을 사용해보자 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React, { Component } from 'react';
import './App.css';
 
class App extends Component {
  render() {
 
    const myname = '왕초보코딩탈출';
    return (
    <div>
      <h1>안녕하세요 나의 이름은 {myname} 입니다.</h1>
      <h2>잘 부탁드립니다.~~~</h2>
    </div>
    );
  }
}
 
export default App;
 
cs



myname에 왕초보코딩탈출 이라고 선언하고


JSX 코드 내에 { }로  감싸서 표현하면 됨




저작자표시 비영리

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

9. React / 리액트 (스타일 CSS 적용하기)  (0) 2018.10.23
8. React / 리액트 (조건부 렌더링)  (0) 2018.10.23
6. React / 리액트 시작하기 (나의 페이지 만들기)  (0) 2018.10.21
5. React / 리액트 ( ES5 와 ES6)  (0) 2018.10.21
4. React / 리액트 (webpack , 웹팩)  (0) 2018.10.21


프로젝트 생성 시 만들어졌던 페이지를 수정해보자 


프로젝트

   src -> App.js 를 수정해보자


1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
     <h1>리액트를 시작해보자</h1>
     <h2>리액트</h2>
    );
  }
}
 
export default App;
cs


이렇게 하면 에러를 발생시킨다 ..


이유는 h1 , h2 두개의 요소가 1개의 부모 요소를 가지고 있지 않아서 에러를 발생시킨다 ..


그래서 div로 둘러준다 ~


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
    <div>
      <h1>리액트를 시작해보자</h1>
      <h2>리액트</h2>
    </div>
    );
  }
}
 
export default App;
 
cs


그리고 yarn start 로 실행해보자



리액트 v16 이상에서는 Fragment컴포넌트가 추가되어  div로 감싸지 않고 여러 요소를 렌더링 하고싶다면


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React, { Component , Fragment} from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
    <Fragment>
      <h1>리액트를 시작해보자</h1>
      <h2>리액트</h2>
    </Fragment>
    );
  }
}
 
export default App;
cs


다음과 같이 작성해서 실행하면 된다.~




저작자표시 비영리

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

8. React / 리액트 (조건부 렌더링)  (0) 2018.10.23
7. React / 리액트 (JSX 에 스크립트식 표현하기)  (0) 2018.10.22
5. React / 리액트 ( ES5 와 ES6)  (0) 2018.10.21
4. React / 리액트 (webpack , 웹팩)  (0) 2018.10.21
3. React / 리액트 프로젝트 만들기  (0) 2018.10.21



리액트를 시작하기 앞서 VScode 유용한 확장 프로그램을 설치하겠습니다.



1. ESLint ( 자바 스크립트 문법을 체크)




2. Relative Path ( 상대경로 작성 시 편리하게 )




3. Guides ( 들여쓰기 가이드라인)




4. React code Snippets ( 리액트 관련 스니펫 모음)




구글에 검색해보시면 더 유용한 확장 프로그램이 많이 있어요 .. 필요하신건 설치하셔서 진행하시면 되겠습니다.~



저작자표시 비영리

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

6. React / 리액트 시작하기 (나의 페이지 만들기)  (0) 2018.10.21
5. React / 리액트 ( ES5 와 ES6)  (0) 2018.10.21
4. React / 리액트 (webpack , 웹팩)  (0) 2018.10.21
3. React / 리액트 프로젝트 만들기  (0) 2018.10.21
1. React 리액트 시작하기(웹앱 만들기)  (0) 2018.10.21

+ Recent posts

티스토리툴바