[React] 기초(4) - useEffect

https://limjisang1115.tistory.com/160

에서 이어진다

useEffect

useEffect(실행할함수, 감지할 상태 리스트);

useEffect(()=>{
    console.log("상태가 바뀜");
} , [searchValue]);

useEffect는 상태가 바뀌지않아도 페이지가 렌더링이 된 후 한번은 실행된다.

* 통신을 할때 사용가능

통신도 하고 상태가 바꼈을때도 사용하고싶다면

useEffect(()=>{
    console.log("통신");
} , []);

useEffect(()=>{
    console.log("상태가 바뀜");
} , [searchValue]);

이렇게 사용이 가능하다

 

---

영화 api를 사용해보자

https://www.kobis.or.kr/kobisopenapi/homepg/apiservice/searchServiceInfo.do

영화진흥위원회 오픈API

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

 

 

useEffect(()=>{
    // console.log("통신");
    fetch("https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230930")
        .then(res => res.json())
        .then((result)=>{
            console.log("result : ",result);
        })
        .catch((error)=>{
            console.error(error);
        });
} , []);

 

import './App.css';
import {useEffect, useState} from "react";
import Item from "./Item";

function App() {

    const [searchValue, setSearchValue] = useState("");
    // 렌더링 될 때마다 바뀌는 변수라면
    // 렌더링 때마다 안바뀌게 하려면 state를 사용해야하고
    // 바뀌어도 상관 없으면 일반 변수를 사용한다.

    const [movieList, setMovieList] = useState([]);

    const changeSearchValue = (event) => {
        setSearchValue(prev => event.target.value);
    }

    // useEffect(실행할함수, 감지할 상태 리스트);

    useEffect(()=>{
        // console.log("통신");
        fetch("https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20230930")
            .then(res => res.json())
            .then((result)=>{
                console.log(result)
                setMovieList(prev => result.boxOfficeResult.dailyBoxOfficeList)

            })
            .catch((error)=>{
                console.error(error);
            });
    } , []);

    useEffect(()=>{
        console.log("상태가 바뀜");
    } , [searchValue]);


  return (
    <div>
        <input value={searchValue} onChange={changeSearchValue} placeholder={"검색어를 입력해주세요"}/>
        <ul>
            {movieList
            .filter(el => el.movieNm.includes(searchValue))
            .map((el, index) => <Item key={index} data={el.movieNm} />)}
        </ul>
    </div>
  );
}

export default App;

영화 api가 가져와지고 검색도 잘 된다.