리액트 _4_검색창 만들기, 동영상 띄우기
<jquery 사용해서 검색창 만들기>
1. 테이블에 id를 정해준다.
2. 제이쿼리를 import 해준다.
3. componentDidMount 를 작성한다.
<Music /> => constructor() => render() => componentDidMount() 이 순서대로 진행되고 있는 것.
componentDidMount는 아래 코드와 같다고 보면 된다.
$(function(){
$('#아이디').click(function(){})
})
componentDidMount에 이렇게 작성한다.
temp는 쓴 단어가 포함된 애들만 표에 남긴다는 코드다.
componentDidMount() {
$('#keyword').keyup(function () {
var k = $(this).val();
$('#user-table > tbody > tr').hide();
var temp = $('#user-table > tbody > tr > td:nth-child(4n+3):contains("'+k+'")')
$(temp).parent().show();
});
}결과)
검색창에 쓴 값이 포함된 애들만 검색된다.
>> 하나씩 누르면 동영상을 볼 수 있게 바꿔보자
1. div row를 없애고 React.Fragment로 싸준 후(width를 해서 줬는데 화면 전체로 안돼서 이걸로 수정함)
className={"col-sm-8"}, className={"col-sm-4"}를 이용하여 화면 분할을 시킨다.
return(
<React.Fragment>
<h1 className={"text-center"}>Music Top50</h1>
<div className={"col-sm-8"}>
<table className={"table"}>
<tr>
<td>
<input type={"text"} id={"keyword"} size={"20"}/>
</td>
</tr>
</table>
<table className={"table table-hover"} id={"user-table"}>
<thead>
<tr className={"danger"}> {/*danger: 빨간색*/}
<th>순위</th>
<th></th>
<th>곡명</th>
<th>가수명</th>
</tr>
</thead>
<tbody>
{html}
</tbody>
</table>
</div>
<div className={"col-sm-4"}>
<h1>상세보기</h1>
</div>
</React.Fragment>2. 클래스에 fluid를 추가한다.
3. 화면이 크고 넓게 두개로 나눠지게 된다.
4. 하나를 눌렀을 때 상세보기에 동영상이 나오게 하기 위해 다른 class를 생성한다.
class MusicDetail extends Component{
render() {
return(
<React.Fragment>
<iframe src={""} width={"200"} height={"200"}></iframe>
<div>제목:</div>
<div>가수명:</div>
</React.Fragment>
)
}
}
export default Music;5. 상세보기 밑에다가 태그로 MusicDetail 클래스를 실행한다.
6. 옆에 출력이 된 것을 확인할 수 있다.
7. 이제 클릭이벤트를 줘보자. tr에 onclick을 써준다.
<tr onClick={this.handlerClick.bind(this,m)}>
8. 클릭했을 때 m값을 넘겨주는데 얘를 받을 변수가 필요하다.
- props: 값을 전달하는 데이터
- state :자신이 가지고 있는 값
class Music extends Component{
constructor(props) {
super(props);
//state 변수선언(아래 render의 const처럼 전역으로도 작성가능)
this.state = {
detail: {}
}
}
handlerClick(m)
{
this.setState({detail:m})
//setState() => reder() 호출
}
render() {
const html=this.props.music.map((m,index)=>
<tr onClick={this.handlerClick.bind(this,m)}>
<td>{m.rank}</td>
<td><img src={m.poster} width={"35"} height={"35"}/></td>
<td>{m.title}</td>
<td>{m.singer}</td>
</tr>
)
return(9. props, state 변수를 이용하여 m값을 받는다. 이제 class MusicDetail 로 보내야한다.
이렇게 data이름에 state값을 넣는다.
<div className={"col-sm-4"}>
<h1>상세보기</h1>
<MusicDetail data={this.state.detail}/>
</div>10. 아래있는 MusicDetail에서 {this.props.data.key}를 넣어준다. data 는 위에 아까 만든 state값이다.
class MusicDetail extends Component{
render() {
return(
<React.Fragment>
<iframe src={this.props.data.key} width={"200"} height={"200"}></iframe>
<div>제목:{this.props.data.title}</div>
<div>가수명:{this.props.data.singer}</div>
</React.Fragment>
)
}
}11. 동영상을 넣으려면 iframe에 있는 src 앞에 유튜브 링크를 넣으면 된다.
class MusicDetail extends Component{
render() {
return(
<React.Fragment>
<iframe src={"http://youtube.com/embed/"+this.props.data.key} width={"200"} height={"200"}></iframe>
<div>제목:{this.props.data.title}</div>
<div>가수명:{this.props.data.singer}</div>
</React.Fragment>
)
}
}결과)
누르는 노래에 맞는 동영상이 옆에 띄어진다.
전체코드
import React,{Component} from "react";
import $ from 'jquery';
class Music extends Component{
constructor(props) {
super(props);
//state 변수선언(아래 render의 const처럼 전역으로도 작성가능)
this.state = {
detail: {}
}
}
handlerClick(m)
{
this.setState({detail:m})
//setState() => reder() 호출
}
render() {
const html=this.props.music.map((m,index)=>
<tr onClick={this.handlerClick.bind(this,m)}>
<td>{m.rank}</td>
<td><img src={m.poster} width={"35"} height={"35"}/></td>
<td>{m.title}</td>
<td>{m.singer}</td>
</tr>
)
return(
<React.Fragment>
<h1 className={"text-center"}>Music Top50</h1>
<div className={"col-sm-8"}>
<table className={"table"}>
<tr>
<td>
<input type={"text"} id={"keyword"} size={"20"}/>
</td>
</tr>
</table>
<table className={"table table-hover"} id={"user-table"}>
<thead>
<tr className={"danger"}> {/*danger: 빨간색*/}
<th>순위</th>
<th></th>
<th>곡명</th>
<th>가수명</th>
</tr>
</thead>
<tbody>
{html}
</tbody>
</table>
</div>
<div className={"col-sm-4"}>
<h1>상세보기</h1>
<MusicDetail data={this.state.detail}/>
</div>
</React.Fragment>
)
}
//<Music /> => constructor() => render() => componentDidMount()
/*
$(function(){
$('#아이디').click(function(){})
})
*/
componentDidMount() {
$('#keyword').keyup(function () {
var k = $(this).val();
$('#user-table > tbody > tr').hide();
var temp = $('#user-table > tbody > tr > td:nth-child(4n+3):contains("'+k+'")')
$(temp).parent().show();
});
}
}
class MusicDetail extends Component{
render() {
return(
<React.Fragment>
<iframe src={"http://youtube.com/embed/"+this.props.data.key} width={"200"} height={"200"}></iframe>
<div>제목:{this.props.data.title}</div>
<div>가수명:{this.props.data.singer}</div>
</React.Fragment>
)
}
}
export default Music;