순차 페이지네이션 만들기 Pagination.jsimport React from 'react';import './Pagination.css';const Pagination = ({itemPerPage, totalItems, paginate, currentPage}) => { const pageNumbers = []; const totalPages = Math.ceil(totalItems / itemPerPage); for(let i = 1; i 페이지 번호를 10개씩 나눠 보여줌 const renderPageNumber = () => { if(totalPages {/* 10페이지 까지만 보여주고 > 이용해서 이전, 이후 기능 만들기 */} ..

페이지네이션     1. 기본 페이지네이션          1 2 3 4 5 6 7 8 9 10 11 12 13 ....          2. 순차 페이지네이션          이전으로 10 11 12 13 14 15 16 다음으로     3. 더보기 페이지네이션         세로로 특정 내용까지만 보여주고 더보기 버튼을 누르면 보여주는 페이지네이션     4. 무한 스크롤 페이지네이션          세로로 계속 보여주는 페이지네이션         스크롤 페이지네이션을 작성하기 위해 npm에서 scroll과 관련된 라이브러리를 가져와서 install해주는게 좋음          : npm i react-infinite-scroller  Pagination.js import React from 'rea..

Fetch나 Axios 를 사용할 때 데이터를 받아오는 시간 동안 띄울 화면을 만들기 - 사용자에게 화면이 보여지기 전에 로딩중이라는 표시를 보여줌으로써 사용자는 조금 더 기다릴 수 있는 시간을 갖게 됨 - 처음엔 로딩을 true설정해서 임시 화면을 띄워놓고 데이터를 모두 가져오면 false로 변경      => 기존 리턴에 작성한 html을 보여줌 const [loading, setLoading] = useState(true);useEffect(() => { axios.get('https://yts.mx/api/v2/list_movies.json?minimum_rating=9&sort_by=year') .then(res => { setMovies(res.data.data.movi..

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 정보 넘겨주기 }..

Ajax : 서버와 통신해서 웹 페이지를 새로고침 하지 않고 데이터를 가져오거나 보낼 수 있게 해주는 기술 - jquery로  이용되는 js에서 많이 사용 - React에서는 Ajax 대신 Fetch API 또는 Axios와 같은 라이브러리를 사용 Fetch API : 리액트에 내장된 API를 가져와서 사용     - API(Application Programming Interface) : 기술 연결 주소         - 어떠한 내용을 주소값으로 가져와 사용하거나 데이터를 보여줄 때 사용         ex) 마이페이지 api = 마이페이지 주소값         ex) 로그인 백엔드 api = 로그인 데이터를 가져올 수 있는 백엔드 주소         ex) API가 잘못 되었다 = 백엔드에서 데이터를..

Comments 요소들을 배열에 담아 출력하기  import React, {useState, useEffect} from 'react';import axios from 'axios';export default function Axios_Ex2(){ const [data, setData] = useState(null); useEffect(() => { axios.get("https://jsonplaceholder.typicode.com/comments") .then(res => { setData(res.data); }) .catch(error => { alert("데이터 불러오기 실패"); })..