index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<title>React App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
<!-- <div id="root" class="container"></div> -->
<div id="root" class="container-fluid"></div>
<!-- bootstrap의 grid 를 적용하려면 container-fluid 로 넣어줘야 한다.
아래 Music.js 에서 tr의 className 이 "col-sm-8" 인것들이 보일것이다. -->
</body>
</html>
index.js
import React,{StrictMode} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Music from "./Music";
import * as serviceWorker from './serviceWorker';
/* 아래 데이터는 뒷부분을 생략했다.
이후 코드들에서 아래music 객체에 포함되지 않는것이 있을수 있다.*/
const music=[{"idcrement":0,"singer":"김재환","album":"안녕" ...}]
ReactDOM.render(
<Music music={music}/>,
document.getElementById('root')
);
serviceWorker.unregister();Music.js
Class 형식으로 작성
Music.js 내에는 Music 과 MusicDetail 클래스가 존재한다.
각 클래스는 아래와 같은 생명주기를 가지고 있다.
import React, {Component} from "react";
import $ from 'jquery'
class Music extends Component{
constructor(props){...}
handlerClick(m){...}
render(){}
componentDidMount(){}
}
class MusicDetail extends Component{
render(){}
}
render()
- render 작성법
- map을 사용하여 반복문으로 data값 뿌려주기
render() {
/*
map
[{m값},{},{}...]
for(String m: music.map)
*/
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 id={"user-table"} className={"table table-hover"}>
<thead>
<tr className={"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>
)
}
componentDidMount()
검색 이벤트 구현
- 'k' : 검색창에 입력한 값
var k=$(this).val();- '순위', '곡명', '가수명' 자식들 중 'k' 를 포함하는것 모두 검색하여 그 부모인 row 전체를 뿌려준다.
var temp=$('#user-table > tbody > tr > td:nth-child(4n+3):contains("'+k+'")')
$(temp).parent().show();
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();
});
}constructor()
Music.js 에서 넣어준 json data 객체를 생성자에 가져올 수 있다. setState
constructor(props) {
super(props);
//변수
this.state={
detail:{}
}
}handlerClick()
하나의 row를 클릭했을 때, handlerClick 이라는 이벤트를 실행한다.
handlerClick(m){
this.setState({detail:m})
// setState()=> render()
}
내맘대로 개발