10/5(수) React-[useEffect, 영화 데이터 리액트로 바꾸기]

오전 React

[리액트 훅]

1.useEffect(()=>{로직 작성} [ ] )

   화면이 렌더링 되자마자 화면에 처음 보여져야할 데이터들을 다룬다

<app.js>

import './App.css';
import Ex01 from './Example/Ex01'
import Ex02 from './Example/Ex02';
import Ex03 from './Example/Ex03'; 
import Ex04 from './Example/Ex04';
import Ex05 from './Example/Ex05';
import Ex06 from './Example/Ex06';
import Ex07 from './Example/Ex07';
import Ex08 from './Example/Ex08';


function App() {

    return (
      <div>

        {/* ex01 : useState 개념, React Event  개념 */}
        {/* <Ex01/> */}

        {/* ex02: useState 좋아요 예제  */}
        {/* <Ex02/> */}

        {/* ex03: useState를 활용한 랜덤숫자게임 */}
        {/* <Ex03/> */}

        {/* ex04: Map 함수를 활용한 발복 컴포넌트 생성 */}
        {/* <Ex04/> */}

        {/* ex05: Map 함수를 활용한 콜렉션 실습! */}
        {/* <Ex05/> */}

        {/* ex06: 미니실습! - 댓글달기 */}
        {/* <Ex06/> */}

        {/* ex07 : 클래스 컴포넌트 */}
        {/* <Ex07/> */}

        {/*ex08: useEffect  */}
        <Ex08/>
      </div>
  );
}

export default App;

<Ex08.js useEffect>

import React, { useEffect, useState } from 'react'

const Ex08 = () => {

  //a. constructor 대체
  // => 변수 초기화, state 관리

  console.log('a. 함수 초기화')

  const [num, setNum] = useState(0)
  const btnCk = () => {
    setNum(num+1)
  }

  // c. 화면 mount
  // useEffect(()=>{},[]) => API Call

  useEffect(()=>{
    console.log('c. Mount')
  },[])

  //d. 값 update
  //useEffect(()=>{},[변화를 감지할 대상])
  //변화를 감지하는 대상은 복수가 될 수도 있다
  
  useEffect(()=>{
    console.log('update!')
  },[num])

  return (
    <div>
      {/* b. render 대체 => 화면 구성 요소 */}
      {console.log('b.rendering')}
      <p>{num}</p>
      <button onClick={btnCk}>+1</button>
    </div>
  )
}

export default Ex08

 

[영화진흥위원회 오픈 API]

일별 박스오피스

JSON 

http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20120101

 

[axious 설치]

[axious import 하기]

** console 창  글자 => key 값 숫자 => 배열 인덱스 ** JSON {} => 객체 [] => 배열 ** 데이터 접근 1) 객체 객체이름. key 2) 배열  배열이름 [인덱스 번호]

우리가 가진 데이터를 테이블 형식으로 렌더링 - useState - useEffect - map(table과 tbody는 반복되지 않는다)

 

[ex09. 영화 데이터 리액트로 바꾸기]

import React, { useEffect, useState } from 'react'
import axios from 'axios'

//Q1. 영화 데이터를 테이블 형태로 렌더링
// 랭킹- 영화제목 - 개봉일자
// React JSX 특징 <table>를 <thead> <tbody> 없이 사용 불가
//<table>
//<tbody>
// <tr> td*3</tr>
// </tbody>
// </table>

const Ex09 = () => {

    const[data,setData] = useState([])
    let month =['01','02','03','04','05','06','07','08','09','10']

    const getData = (selectMonth) =>{
        console.log('원하는 달',selectMonth) 
        let url = `http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=2022${selectMonth}01`

        axios
        .get(url)
        .then((res)=>{
            //영화 순위가 모여있는 배열 : data
            //영화 이름 : movieNm / 개봉일자: openDt / 랭킹 : rank
            setData(res.data.boxOfficeResult.dailyBoxOfficeList)
            console.log(data)
        })

        .catch(()=>{alert('error!')})
    }
        useEffect(()=>{

            //현재 날짜 => 몇월
            let todayMonth = new Date().getMonth()+1
            getData(todayMonth)
            
        },[])

        const btnCk = (e)=>{
            console.log(e.target.value)
            getData(e.target.value)
        }

        return (
            <div>
                <h1>2022년 올해의 영화</h1>
                <p>매달 1일 순위를 보여드립니다</p>

                {/* 버튼 생성 */}
                {month.map((item)=>(<button onClick={btnCk} value={item} key={item}>{item}월</button>))}

                <table>
                    <tbody>
                        {/* 여기서부터 반복 시작! */}
                      {data.map((item)=>(
                      <tr key={item.rank}>
                        <td>{item.rank}</td>
                        <td>{item.movieNm}</td>
                        <td>{item.openDt}</td>
                      </tr>            
                      ))}
                    </tbody>
                </table>
            </div>
            )
        }


export default Ex09

---

오후 spring