230726 axios 라이브러리를 활용한 news api, TMDB 데이터 페칭

NEWS API 뉴스 리스트

https://newsapi.org/

회원 가입을 하면 뉴스 리스트 조회에 필요한 API key를 받을 수 있습니다.

뉴스 리스트 가져오기

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Button, Card, Container, Row, Col } from 'react-bootstrap';



const NewsPage = () => {
    /* 1. 가장 먼저 데이터를 저장할 변수를 설정합니다.
 		단순히 data, dataList라고 정하지 말고, 뉴스의 목록을 조회하므로 newsList라고 변수를 설정하도록 하겠습니다.
 */
 
  const [newsList, setNewsList] = useState([]);

  console.log(newsList)

  
// 2. 데이터를 fetch할 함수를 만듭니다.
  const fetchData = async () => {
//4
    try{

      const {data, status} = await axios.get('https://newsapi.org/v2/everything?q=tesla&from=2023-06-30&sortBy=publishedAt&apiKey=a59be9aa893d41d6844304d4c23162ef')
      
      
      console.log("&&&&&&&&&&&&&&&&&&&&", data)
      console.log(status)
      // 상태코드가 200, 즉 요청한 데이터가 정상적으로 불러올 경우에 컴포넌트 상태값에 데이터의 배열을 저장합니다.
      if(status === 200){
        setNewsList(data.articles)
      }
  
    }catch(e){
      console.log(e.message)
    }
  }

 


//3. 마운트 되었을때만 fetch함수를 실행하도록 설정합니다. 의존성 리스트에 빈배열을 적용하지 않을 경우 계속 데이터를 fetch하는 일이 발생합니다.
  useEffect(()=>{
    fetchData();
  },[])

// 4. 저장할 데이터를 가지고 렌더링을 할 JSX를 만듭니다.
  /* https://react-bootstrap.netlify.app/docs/components/cards 참조하여 적용
 
	mt : margin-top, mb : margin-bottom.....  
 
*/
  
  return (
    
    <Container className={"mt-3"}>
        <Row>
        {newsList && newsList.map((item, index) => (
            <Col className='mt-3 mb-3'>
            <Card style={{ width: '18rem' }} key={index}>
                <Card.Img variant="top" src={item.urlToImage} style={{height : "250px"}}/>
                <Card.Body>
                    <Card.Title>{item.title.slice(0,10)}</Card.Title>
                    <Card.Text>
                    {item.description.slice(0,80)}
                    </Card.Text>
                    <Button variant="primary">Go somewhere</Button>
                </Card.Body>
            </Card>
            </Col>
        ))}
        </Row>
    </Container>
  )
};

export default NewsPage;

TMDB 영화 리스트 조회

https://www.themoviedb.org/?language=ko

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { Card , Button, Container, Row, Col } from 'react-bootstrap';
import { useNavigate } from 'react-router-dom';

const MoviePage = () => {

    const navigate = useNavigate();

    const [movies, setMovies] = useState([]);

    const fetchData =  async () => {

        try{
            const options = {
                headers : {
                    Authorization : "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4MTAyZWViZjJiZGFiMDVmMmUyNzljZTlhYjFhMDdjMCIsInN1YiI6IjY0YmI3MDdjZmQ0YTk2MDEwNmIyMjEwZiIsInNjb3BlcyI6WyJhcGlfcm***************"
                }
            }
            const {data, status} = await axios.get('https://api.themoviedb.org/3/movie/now_playing', options)

            console.log(data)
            
            if(status === 200){
                setMovies(data.results)
            }
        }catch(e){
            console.log(e.message);
        }
    }

    useEffect(()=>{
        fetchData();
    },[])

    return (
        <Container className={"mt-3"}>
            <Row>
            <h1>Movie</h1>
        
            {movies && movies.map(movie => (
                <Col className='mt-3 mb-3'>
                <Card style={{ width: '18rem' }}>
                <Card.Img variant="top" src={"https://image.tmdb.org/t/p/w500"+movie.poster_path} />
                <Card.Body>
                  <Card.Title>{movie.title.slice(0,10)}</Card.Title>
                  <Card.Text>
                    {movie.overview.slice(0,80)}
                  </Card.Text>
                  <Button variant="primary" onClick={()=> navigate(`/${movie.id}`) }>Go somewhere</Button>
                </Card.Body>
              </Card>
              </Col>
            ))}

            </Row>

        </Container>
    );
};

export default MoviePage;

영화 상세 페이지

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';


const Detail = () => {

  /* 상세페이지의 url을 가져옵니다.*/
    const {movieId} = useParams()

//위의 그림처럼 영화 하나에 대한 상세정보가 객체 형태로 되어있으므로 빈 배열로 초깃값을 설정합니다.
  const [movie, setMovie] = useState({})

  const getMovie = async () => {

      try{

          const options = {
              headers : {
                  Authorzation : "Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI4MTAyZWViZjJiZGFiMDVmMmUyNzljZTlhYjFhMDdjMCIsInN1YiI6IjY0YmI3MDdjZmQ0YTk2MDEwNmIyMjEwZiIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.***********",
              }
          }

          const {data, status} = await axios.get(`https://api.themoviedb.org/3/movie/${movieId}`, options)

          console.log("&&&&&&&&&&", data)

          console.log(status)

      }catch(e){
          console.log(e.message)
      }
  }


  useEffect(() => {
      getMovie();
  }, [])

  return (
      <div>
          <h1>영화 상세정보</h1>
          <h1>{movieId}</h1>
      </div>
  );
};

export default Detail;