JSONPlaceholder

JSONPlaceholder에서 가짜 유저 데이터를 받아올 수 있습니다.

• Listing all resources(리스트 받아오기)

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json())
  .then((json) => console.log(json));

fetch 명령어로 url로 요청을 보내면 user 정보가 응답으로 전달됩니다.

user 정보를 받아오려 하기 때문에, 위의 url에서 posts 대신에 users를 사용합니다.

fetch('https://jsonplaceholder.typicode.com/users')

axios

npm install axios

axios 패키지를 설치해줍니다.

axios를 사용하여 user 정보 받아오기

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

const Users = () => {
    useEffect(() => {
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then(response => {
                console.log(response);
            });
    }, []);
    return (
        <h1>Users</h1>
    );
}

useEffect를 사용하여 렌더링 할 때 axios로 user 데이터를 받아옵니다.

• get 사용 axios로 해당 url에 get을 사용하여 user 정보를 요청합니다.
  
• then 사용 request에 대한 response가 적절히 도착했으면 어떤 행동을 취하도록 합니다. (위의 코드에서는 response가 잘 도착했으면 console창에 응답으로 온 데이터를 보여주도록 합니다)
  

useState를 사용해 받아온 데이터 저장&출력하기

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import UserList from '../components/UserList';

const Users = () => {
    const [users, setUsers] = useState([]);

    useEffect(() => {
        axios.get('https://jsonplaceholder.typicode.com/users')
            .then(response => {
                setUsers(response.data);
            });
    }, []);

    return (
        <>
            <h1>Users</h1>
            <UserList users={users}/>
        </>
    );
}

export default Users;

• 받아온 데이터 users에 저장하기

.then(response => {
    setUsers(response.data);
}

응답이 제대로 들어왔을 때 setUsers() 함수를 사용해 response의 data를 users의 정보로 변경시켜줍니다.

• users에 저장된 데이터 props로 전달하기

return (
    <>
        <h1>Users</h1>
        <UserList users={users}/>
    </>
);

자식 컴포넌트인 UserList에 users의 데이터를 props 형태로 전달해줍니다.

• 전달받은 데이터 화면에 출력하기

import React from 'react';

const UserList = ({ users }) => {
    return (
        <div>
            {users.map(user => {
                return (<div key={user.id}>
                    {user.name}
                </div>)
            })}
        </div>
    );
};

export default UserList;

{ users }로 데이터를 부모 컴포넌트로부터 전달받고, map() 함수를 사용해 user가 전체 유저 데이터를 돕니다. ⇒ 이때, 유저들의 이름만을 출력하고 싶으면 user.name을 사용합니다.

각각의 객체를 식별할 수 있도록 key값을 고유한 user의 id로 설정합니다.