Fetch

Fetch를 이용해 User 리스트를 뽑아 나열하기

 

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

const FetchEx = () => {

    const [users, setUsers] = useState([]);
    //const [error, setError] = useState(null);

    //데이터 가져오기
    useEffect(() =>{
        fetch('https://jsonplaceholder.typicode.com/users')
        
        .then(res =>{ //데이터를 가지고 왔는지 확인
            return res.json(); //데이터를 가져왔으면 json 정보 넘겨주기
        })
        
        .then(data =>{
            setUsers(data);
        })

        .catch(e => {
            alert("에러가 발생했습니다." + e);
            //setError(e);
        })
    }, []);
    return(
        <>
        <h1>User List 보기</h1>
        <ul>
            {users.map(user => (      
                <li key={user.id}>{user.name}</li>
            ))}
        </ul>
        </>
    )
}
export default FetchEx;

 

 

 

--------------------------------------------------------------------------------------------------------------------------------

Fetch를 이용해 색상 2개 가져오기

 

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

const PhotoList = () => {

    const [photos, setPhotos] = useState([]);

    useEffect(() => {
        fetch('https://jsonplaceholder.typicode.com/photos')

        .then(res => {
            return res.json();
        })

        .then(data => {
            //setPhotos(data); api 주소에 작성된 모든 데이터 가져오기

            //데이터의 일부분만 가져오기 -> slice 이용
            //slice(시작위치, 끝위치);
            setPhotos(data.slice(0, 2));
        })

        .catch(e => {
            alert("에러 발생" + e);
        })
    }, []);
    return(

        <>
        <h1>사진 리스트</h1>
        <ul>
            {photos.map(photo => (
                <li key={photo.albumId}>
                    <strong>title : </strong>{photo.title}<br/>
                    <img src={photo.thumbnailUrl}/>
                </li>
            ))}
        </ul>
        </>
    )
}
export default PhotoList;
//이걸 맨 첫 줄에 쓰면 에러 발생