리액트 _17_React_검색창 만들기

**이 포스팅에 이어서 진행합니다.

https://wastetime.tistory.com/30

리액트 _16_React_useState, useEffect

1. 위에 검색창을 하나 만든다.

2. 이벤트 컨트롤을 할 수 있는 변수를 만든다.

* e.target.value 를 이용해서 내가 검색창에 입력한 값에 이벤트를 준다.

3. 검색창 input 부분에 onChange 이벤트를 준다. 

검색창에 쓴 값이 콘솔에 찍히는 것을 확인 할 수 있다.

 

4. 새 js파일을 만들어서 useState,useEffect,useCallback,useMemo 를 import한다.

*useCallback 은 같은 것을 선택했을 때 새로 로딩하지 않고 이전 기록에서 가져와서 보여주는 것이다. 

import React,{useState,useEffect,useCallback,useMemo} from "react";

5. 큰 틀마다 하나씩 function을 만들어준다.

import React,{useState,useEffect,useCallback,useMemo} from "react";
import axios from 'axios';

//최종조립용
function App3() {

    return(
        <React.Fragment>  ==> <div classNam={"row"} 로 해도된다.
            <H/>
            <SearchBar/>
            <MusicTable/>
        </React.Fragment>
    )
}
//음악리스트 큰 틀
function MusicTable() {

}
//음악 한곡씩
function MusicRow() {

}
//검색바
function SearchBar() {

}

//Memo 기능 사용
const  H = () =>{

}

//Memo 기능 미사용
const  H2 = () =>{

}
export default App3;

 

6. Music Top50 이 먼저 있어야 하므로 얘를 먼저 코딩한다.

//Memo 기능 사용
const  H = () =>{
    return(
        <h1 className={"text-center"}>Music Top50</h1>
    )
}

 

7. SearchBar도 만들어준다. 

//검색바 useCallback 사용
function SearchBar() {
    return(
        <table className={"table"}>
            <tr>
                <td>
                    <input type={"text"} size={"25"} className={"input-sm"} placeholder={"Search"}/>
                </td>
            </tr>
        </table>
    )
}

 

8. MusicTable 도 만들어준다.

//음악리스트 큰 틀
function MusicTable() {
   return(
       <table className={"table"}>
           <thead>
               <tr className={"danger"}>
                   <th>순위</th>
                   <th></th>
                   <th>노래명</th>
                   <th>가수명</th>
               </tr>
           </thead>
       </table>
   )
}

결과) 일단 틀만 생성되어있다. 

9. App3 function에 모든 값이 들어오기 때문에 안에 변수를 만들어준다.

음악리스트인 music과 입력한 단어를 의미하는 ss를 만든다. 

10. axios로 값을 불러오고 변수에 담은 다음 MusicTable로넘겨준다.

//최종조립용
function App3() {
    //변수 설정
    const [music,setMusic]= useState([]);
    const [ss,setSs] = useState("");
    // 변수 초기값
    useEffect(()=>{
        axios.get('http://localhost:3000/music.json').then((res)=>{
            setMusic(res.data)
        })
    },[]) //Mount 할 때만 실행 => componenetDidMount
    return(
        <div className={"row"}>
            <H/>
            <SearchBar/>
            <div style={{"height":"30px"}}></div>
            <MusicTable music={music} ss={ss}/>
        </div>
    )

}

11. MusicTable에서 넘긴 값을 받는다.

row.push(<MusicRow music={m}/>) 이렇게 써서 MusicRow 에다가도 값을 넘겨준다.

//음악리스트 큰 틀
function MusicTable(props) {
    let row=[];
    props.music.forEach((m)=>{
        if(m.title.indexOf(props.ss)==-1){
            return;
        }
        //배열에 추가
      row.push(<MusicRow music={m}/>)
    })
   return(
       <table className={"table"}>
           <thead>
               <tr className={"danger"}>
                   <th>순위</th>
                   <th></th>
                   <th>노래명</th>
                   <th>가수명</th>
               </tr>
           </thead>
       </table>
   )
}

12. MusicTable가 넘겨준 값을 MusicRow에서 받아준다.

//음악 한곡씩
function MusicRow(props) {
    return(
        <tr>
            <td>{props.music.rank}</td>
            <td><img src={props.music.poster} width={"30"} height={"30"}/></td>
            <td>{props.music.title}</td>
            <td>{props.music.singer}</td>
        </tr>
    )
}

결과) 이렇게 전체 리스트가 출력되어있는 것을 볼 수 있다.

13. 검색창에 값을 입력했을 때 관련 노래가 검색되게 해보자

  SearchBar에 있는 값을 App3에서 받아서 ss라는 변수로 MusicTable에게 보내고 그 값을 MusicRow로 받아야 한다.(복잡: 단방향이어서)

 

App3에서 ss 값을 받는 이벤트를 등록한다. 

14. return 에서 태그 옆에 이벤트를 등록해준다.

15. 검색바 function에서 onChange 변수를 만들고 input에다가 넣어준다. 

function SearchBar(props) {
    const  onChange =(e)=>{
        props.onUserInput(e.target.value);
    }
    return(
        <table className={"table"}>
            <tr>
                <td>
                    <input type={"text"} size={"25"} className={"input-sm"} placeholder={"Search"} onChange={onChange}
                           value={props.ss}/>
                </td>
            </tr>
        </table>
    )
}

결과) 검색하는 노래가 리스트에 보여지게 된다.