대략적으로 그림을 그려봤다 ... 마우스로 그려서 그런지 좀 잘 못그린거같다.
완성된 프로젝트는 이렇게 나와있다.
VideoListEntry
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
import React from 'react';
const VideoListEntry = (props) => (
<div className="video-list-entry">
<div className="media-left media-middle">
<img className="media-object" src={props.data.snippet.thumbnails.default.url} alt="" />
</div>
<div className="media-body">
<div className="video-list-entry-title" onClick={ props.clickHander.bind(this,props.data)}>{props.data.snippet.title}</div>
<div className="video-list-entry-detail">{props.data.snippet.description}</div>
</div>
<button onClick={props.watchlater.bind(this,props.data)}>watch later</button>
</div>
);
export default VideoListEntry;
|
cs |
src는 이미지를 가져온 것을 넣는것이고
onclick을 이용해 bind로 묶어줌으로서 데이터를 가져와서 함수로 메서드를 만들었다.
|
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
|
import React, { Component } from 'react';
import Nav from './Nav';
import VideoPlayer from './VideoPlayer';
import VideoList from './VideoList';
import {searchYouTube} from '../searchYouTube'
import WatchList from './WatchList'
class App extends Component {
//컴포넌트가 실행될떄 생성되는 곳...
constructor(props){
super(props);
if(localStorage.getItem("state")){
let state = JSON.parse(localStorage.getItem("state"));
console.log(state)
// state = JSON.parse(state);
this.state = {
currentVideo : state.currentVideo,
videos : state.videos,
watchlater : state.watchlater
}
}
else{
this.state = {
currentVideo : null,
videos : [],
watchlater : []
}
}
this.searchHandler = this.searchHandler.bind(this);
this.clickHander = this.clickHander.bind(this);
this.init = this.init.bind(this);
this.watchlater = this.watchlater.bind(this);
this.remove = this.remove.bind(this);
}
//fetch로 가져온 데이터를 넣는 작업..
componentDidMount(){
searchYouTube({query:'펭수',max : 10}, this.init.bind(this))
}
//셋팅용 함수
init(videos){
this.setState({
currentVideo : videos[0],
videos : videos
})
}
//검색용
searchHandler(word){
searchYouTube({query:word,max:10},this.init.bind(this));
}
//클릭용
clickHander(video){
this.setState({
currentVideo : video
})
}
watchlater(data){
this.state.watchlater.push(data);
this.setState({
watchlater : this.state.watchlater
})
}
remove(data){
this.setState({
watchlater : this.state.watchlater.filter((element)=>element.etag!==data.etag)
})
}
componentDidUpdate(){
localStorage.setItem("state",JSON.stringify(this.state));
console.log(this.state);
}
render()
{
return (
<div>
<Nav searchHandler={this.searchHandler}/>
<div className="col-md-7">
<VideoPlayer curVideo={this.state.currentVideo}/>
</div>
<div className="col-md-5" >
<WatchList video={this.state.watchlater} remove={this.remove} clickHander={this.clickHander}></WatchList>
</div>
<div className="col-md-7" >
<VideoList video={this.state.videos} clickHander={this.clickHander} watchlater={this.watchlater}/>
</div>
</div>
)
}
}
export default App;
|
cs |
componentDidMount 는 컴포넌트가 생성되고 마지막에 실행되는 것이다.
fetch는 비동기 함수로 실행되므로 가짜 형식데이터를 구성해주고 난뒤에 서버로 부터 값을 가져와서 구성할때 componentDIdmount를 사용해 값을 가져와 setState를 해준다.
init 은 셋팅용으로 만든 함수이다.
셋팅할때마다 사용되며 끌어다 쓸수 있어서 재사용성이 좋다.
searchHandler 는 검색 할때 data를 가져와서 그것으로 검색해서 서버로 부터 값을 가져온다.
watchlater는 videoList에 있는 것들중에 나중에 볼것이 생기게 되면 watchlater를 클릭해서 watchlater라는 배열에 다가 값을 추가적으로 집어 넣는다.
remove 함수는 watchlater에 들어있는 것들을 삭제하기 위해서 만든 함수이다.
중요한 것은 기존 state 관리는 기존 것을 재사용하는 것이 아니라 새로운 것을 갈아 끼워야 하므로 삭제할 video를 제외한 객체를 재생성해서 추가해야한다.
componentDidUpdate 에서는 컴포넌트가 변경될떄마다 localstorge에 JSON값을 문자열로 바꿔서 입력해 놓는다.
props : 부모 컴포넌트가 자식 컴포넌트에게 내려주는 데이터
변경 불가 , 고정 값
넘길수 있는 값 string number function
state :
컴포넌트 안에서 관리
setStae 메소드를 이용하여 변경하여야 한다.
재랜더링 할 수 있도록
setState 자체는 동기로 작동한다 내부에서 state 값을 업데이트 하는 것은 비동기로 작동한다.
class를 사용하기 위해서는 class component를 사용해야합니다.
=> react.component를 상속받아야 합니다.
react hooks => functional state를 쓸 수 있도록 만들어줍니다.
life cycle
컴포넌트가 생성되고 업데이트되고 사라질떄 항상 실행되는 함수 메서드
componentDIdmount에 fetch를 사용하는 이유
사용자에게 보여줘야하기떄문
항상 보장된 타이밍에 실행되는 메서드
fetch => componentDidMount 비동기여서..
이벤트를 등록하고 해제할 때 사용..
react => state에 데이터를 저장할떄 항상 새로운 데이터를 넣어 주어야 합니다.
why?!=> 속도 변화감지!! 메모리 효율성
virtual DOM => 변경된 부분만 바꿔주는 역할을 하도록 만듬.
lifting state up 자식 컴포넌트의 어떤액션을 통해 부모 컴포넌트의 stae를 변경시키는 작업,.
why?!
=> 컴포넌트 단위로 로직을 작성하기 때문에.
how
상위 컴포넌트에서 state를 변경시키는 method를 만듭니다.
만든 메소도를 자식 컴포넌트에게 props로 넘겨준다. => 자식 컴포넌트에서는 넘겨받은 props를 실행시킨다.
화살표 함수는 실행 컨택스트를 만들지 않습니다.
'코드스테이츠 immersive' 카테고리의 다른 글
| Server Side Techniques 에 대해서 (0) | 2020.02.04 |
|---|