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


Component 를 시작하기전에 


다음 그림부터 보자


parent 는 지금까지 작성한 App.js 일것이고 추가로 이제 component 를 만들어 볼것인데 그전에 


props와 state에 대해 간략하게 알고가자


말그대로 속성과 상태이다


쉽게 설명하면 



parent 는  백지도화지라고 가정하면 

각각 component 를 덕지덕지 붙여서 하나의 화면을 만든다 ~ 라고 생각하면 될듯


밑에 그림을보면

portfolio 부모 컴포넌트라고 생각하고 

Navbar 컴포넌트 

jumbotron 컴포넌트

contents 컴포넌트

footer 컴포넌트





이렇게 각각 컴포넌트 별로 만들어서 붙이면됨

그리고 앞서 공부한 css로 이쁘게 꾸며주면



이런식으로 그림이 나오는것이다.


위 Navbar에서 Home / About / Gallery / Contact 를  porps라고 생각하자   


우측에 로그인은 state 라고 생각하자


로그인을하면 logout으로 상태를 바꾼다


이런식으로 정적인것을 props  동적인것을 state 라고 생각하면 쉽지만 


무조건 props가 정적이다는 아니다. ... 


(부모 state에서 자식 porps로  자식 컴포넌트에서 특정 이벤트가 발생할 때 부모 메서드를 호출하면 

props 도 유동적으로 사용할 수 있다 하지만 우선 개념을 이해하기 위해선 쉽게 가자)











저작자표시 비영리

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

12. React/리액트 (props) 복습하기  (0) 2018.11.03
11. React/ 리액트 (컴포넌트 복습)  (0) 2018.11.03
9. React / 리액트 (스타일 CSS 적용하기)  (0) 2018.10.23
8. React / 리액트 (조건부 렌더링)  (0) 2018.10.23
7. React / 리액트 (JSX 에 스크립트식 표현하기)  (0) 2018.10.22



리액트에 CSS 를 적용하기 위해서는  이런식으로 작성했겠죠 리액트는 더더욱 간단함


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
<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-color: lightblue;
}
h1 {
    color: white;
    text-align: center;
}
p {
    font-family: verdana;
    font-size: 20px;
}
</style>
</head>
<body>
 
<h1>My First CSS Example</h1>
<p>기본 html 기초</p>
 
</body>
</html>
cs




리액트는  { } 안에 넣으면됨 


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
import React, { Component } from 'react';
import './App.css';
 
class App extends Component {
  render() {
 
    const myname = '왕초보코딩탈출';
 
    const style = {
 
      backgroundColor : 'red',
      border: '1px solid black',
      
 
    }
    
    return (
    <div style={style} >
    
      <h6>안녕하세요 나의 이름은 {myname} 입니다.</h6>
      <h6>잘 부탁드립니다.~~~</h6>
 
    </div>
    );
  }
}
 
export default App;
 
cs


여기서 중요한 것은 


기존에는           background-color: lightblue;

리액트에서는     backgroundColor : 'red',


조금 차이가 있음 


camelCase 를 써야함


camelCase란 말그대로 탁타표기법으로 낙타 등처럼 울퉁불퉁 


camelCase 요런식


  • 각 단어의 첫문자를 대문자로 표기하고 붙여쓰되, 맨처음 문자는 소문자로 표기함
  • 띄어쓰기 대신 대문자로 단어를 구분하는 표기 방식



CSS import 해서 사용하기


조금 차이가 있음 APP.css를 수정하시거나 추가로 css 파일을 하나 만들서 수정합니다.

 




1
2
3
4
.div1 {
  background-color: skyblue;
  font-size: 20px;
}
cs



App.js 에 파일을 임포트합니다.

className 을 설정하시면 됩니다.


import './App.css';


<div className="div1">
    <p>css 파일 import</p>
</div>



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
import React, { Component } from 'react';
import './App.css';
 
class App extends Component {
  render() {
 
    const myname = '왕초보코딩탈출';
 
    const style = {
 
      backgroundColor : 'red',
      border: '1px solid black',
      
 
    }
    
    return (
    <div>
      <div style={style} >
        <h6>안녕하세요 나의 이름은 {myname} 입니다.</h6>
        <h6>잘 부탁드립니다.~~~</h6>
      </div>
      <div className="div1">
        <p>css 파일 import</p>
      </div>
    </div>
    );
  }
}
 
export default App;
cs




저작자표시 비영리

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

11. React/ 리액트 (컴포넌트 복습)  (0) 2018.11.03
10. React / 리액트 (props 와 state)  (0) 2018.10.27
8. React / 리액트 (조건부 렌더링)  (0) 2018.10.23
7. React / 리액트 (JSX 에 스크립트식 표현하기)  (0) 2018.10.22
6. React / 리액트 시작하기 (나의 페이지 만들기)  (0) 2018.10.21



JSX 내부에서는 if문을 사용할 수 없음 


그렇다면 어떻게 조건문을 사용할 수 있을까??


{ } 안에 연산자를 사용하면됨 ㅎ


매우매우 간단함


state 가 true 일 때 참입니다.

login 이 false 일 때 로그인을 하세요


&& 를 사용할 수 도 있다. true 면 보여주고 그렇지 않으면 렌더링 해도 보여주지 않는다


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
37
38
39
40
41
42
43
import React, { Component } from 'react';
import './App.css';
 
class App extends Component {
  render() {
 
    const myname = '왕초보코딩탈출';
 
    const state = true;
 
    const login = false;
 
    const display = true;
    
    return (
    <div>
      <h6>안녕하세요 나의 이름은 {myname} 입니다.</h6>
      <h6>잘 부탁드립니다.~~~</h6>
 
      <h2>
      {
        state ? '참 입니다.' : '거짓 입니다.'
      }
      </h2>
      <h2>
      {
        login ? '로그인 되었습니다..' : '로그인을 하세요'
      }
      </h2>
      <h2>
      {
        display && '아하하하하' 
      }
      </h2>
 
    </div>
    );
  }
}
 
export default App;
 
 
cs



로그인했을 때와 안했을 때 화면을 다르게 하거나 권한별로 페이지를 다르게 보여주거나 뭐 그럴때 써봐야겠다.~


리액트가 처음엔 어려웠으나 어찌보면 좀 쉬운것 같기도하네요 아닌가?ㅎㅎㅎㅎ여튼 열심히해봐야겠다



평일엔 ㅠㅠ 기초를 좀 다지고 주말에 속도를 내야겠다 ㅠㅠ



저작자표시 비영리

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

10. React / 리액트 (props 와 state)  (0) 2018.10.27
9. React / 리액트 (스타일 CSS 적용하기)  (0) 2018.10.23
7. React / 리액트 (JSX 에 스크립트식 표현하기)  (0) 2018.10.22
6. React / 리액트 시작하기 (나의 페이지 만들기)  (0) 2018.10.21
5. React / 리액트 ( ES5 와 ES6)  (0) 2018.10.21


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

+ Recent posts

티스토리툴바