9월30일93일차 - React 영화진흥위원회 API 불러오기

영화진흥위원회에서 영화 정보를 불러옵니다.

---

const App = () => {
    const [itm, setItm] = useState();

    useEffect(() => {
        const key = "";
        const today = getToday();
        const url = `http://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=${key}&targetDt=${
            today - 1
        }`;
        const getMovie = async () => {
            const res = await axios.get(url);
            const BOXOFFICE = res.data.boxOfficeResult.dailyBoxOfficeList.map(
                (it) => {
                    return {
                        rank: it.rank,
                        movieNm: it.movieNm,
                        openDt: it.openDt,
                    };
                }
            );
            setItm(BOXOFFICE);
        };
        getMovie();
    }, []);

우선 useEffect()로 최초에 로딩을 하도록 합니다.

 

async await를 써서 비동기방식으로 API로부터 데이터를 받아오도록 합니다. 

        const getMovie = async () => {

            const res = await axios.get(url);

비동기방식으로 데이터를 받아오지 않으면 렌더링이 끝난 뒤에 데이터를 받아오게 되어 오류가 발생합니다.

 

 

 

저장할 데이터를 BOXOFFICE 변수에 객체로 담았습니다.

axios는 res.data로 원하는 데이터에 쉽게 접근할 수 있습니다.

const BOXOFFICE = res.data.boxOfficeResult.dailyBoxOfficeList.map(

                (it) => {

                    return {

                        rank: it.rank,

                        movieNm: it.movieNm,

                        openDt: it.openDt,

                    };

                }

            );

 

 

 

그리고 setItm(BOXOFFICE)로 받아온 데이터를 itm state에 저장하도록 합니다.

            setItm(BOXOFFICE);

        };

        getMovie();

    }, []);

 

 

 

데이터를 전달하고자 하는 컴포넌트에 props로 전달합니다.

                    <Routes>

                        <Route path="/" element={<Main BOXOFFICE={itm} />} />

                        <Route path="/theater" element={<Theater />} />

                        <Route path="/event/*" element={<Event />} />

                        <Route path="/store/*" element={<Store />} />

                        <Route path="/benefit/*" element={<Benefit />} />

                        <Route

                            path="/movies/*"

                            element={<Movies BOXOFFICE={itm} />}

                        />

                        <Route path="/ticketing" element={<Ticketing />} />

                    </Routes>

 

 

 

 

해당 컴포넌트로 이동하여 props를 받습니다. 저는 여기서 Movies 컴포넌트로 이동했습니다.

const Movies = ({ BOXOFFICE }) => {

 

 

 

제가 실제로 데이터를 이용할 컴포넌트는 App.js > Movies.js > Movie.js 에 있기 때문에

Movie 컴포넌트에 다시 props를 전달했습니다.

                <Movie BOXOFFICE={BOXOFFICE} />

 

 

 

마찬가지로 Movie 컴포넌트에서도 props를 받습니다.

const Movie = ({ BOXOFFICE }) => {

 

데이터를 map 함수로 html 구조에 맞게 펼쳐줍니다.

저는 데이터를 받아올 때 어느 컴포넌트에서 props를 전달하였는지 헷갈리는 편이기 때문에

주석으로 어느 파일에서 받아왔는지 추적을 하고, 전달할 속성을 메모해주었습니다.

            <div className="movieBox">

                {/** App.js > Movies.js 에서 movie props전달

                  rank, movieNm:영화이름, openDt:개봉일*/}

                {BOXOFFICE.map((el, idx) => {

                    return (

                        <ul key={idx}>

                            <li>{el.rank}</li>

                            <li>{el.movieNm}</li>

                            <li>{el.openDt}</li>

                        </ul>

                    );

                })}

            </div>