Lami
삶이 온통 사람의 길이니
Lami
전체 방문자
오늘
어제
  • 분류 전체보기 (165)
    • Elice (1)
      • 회고록 (1)
    • Git (0)
    • HTML ▪ CSS (4)
    • JavaScript (7)
      • BOJ (2)
      • Programmers (0)
      • Study Note (5)
    • TypeScript (0)
    • React (21)
      • Lecture (19)
      • Study Note (2)
    • Python (44)
      • CodeUp (38)
      • Programmers (0)
      • Study Note (6)
    • Modern Agile (80)
      • Tech Talk (7)
      • TIL (73)
    • 문제해결 (1)
    • 회고록 (5)
    • 도란도란 (2)

블로그 메뉴

  • Github

공지사항

  • 👋 안녕하세요!

인기 글

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
Lami

삶이 온통 사람의 길이니

React/Lecture

[Kossie Coder] axios

2022. 1. 15. 21:08
npm install axios
// UserList.js

import React from 'react';

const UserList = (🌟{ users }🌟) => {
  console.log('users :>> ', users);
  return (
    <div>
      🌟{users.map((user) => {
        return (
          <div className="card mb-2" key={user.id}>
            <div className="card-body p-3">{user.name}</div>
          </div>
        );
      })}🌟
    </div>
  );
};

export default UserList;
// User.js

import React, { useEffect, useState } 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>Users1</h1>
      🌟<UserList users={users} />🌟
    </>
  );
};

export default Users;

 

User.js 에서 axios를 이용해 유저 데이터를 받아오고, 그것을 setUsers 로 변화를 주어 UserList 컴포넌트의 props 로 넘겨준다.

 

 

 

/* 유튜브 코지코더 채널에서 리액트js (Reactjs) 기초 익히기 기본 강좌를 보며 기록한 글입니다.

https://youtube.com/playlist?list=PLB7CpjPWqHOuf62H44TMkMIsqfkIzcEcX */

'React > Lecture' 카테고리의 다른 글

[Kossie Coder] routes 파일 만들기  (0) 2022.01.16
[Kossie Coder] 로딩 Spinner 추가하기  (0) 2022.01.15
[Kossie Coder] NavLink 사용하기  (0) 2022.01.15
[Kossie Coder] react router Switch, exact 속성  (0) 2022.01.14
[Kossie Coder] react router 설치  (0) 2022.01.14
    'React/Lecture' 카테고리의 다른 글
    • [Kossie Coder] routes 파일 만들기
    • [Kossie Coder] 로딩 Spinner 추가하기
    • [Kossie Coder] NavLink 사용하기
    • [Kossie Coder] react router Switch, exact 속성
    Lami
    Lami
    성장하는 즐거움을 알아가는 중입니다🌱

    티스토리툴바