본문 바로가기

전체 글229

(8)React로 데이터 다루기_8_ "더보기" 버튼 비활성화 방법2, 비동기함수 구현시 주의해야할점 => 콜백함수로 예약시점의 값 변화 X , 현재시점의 값 변화 O ● 이론0_ hasNext를 이용하여, '더보기' 버튼을 조건부로 보였다, 안보였다 기능으로 코드 작성해보기앞에서 논리 연산자 && 을 사용해서 간단한 조건부 렌더링을 해봤는데요.이번 레슨에선 리액트에서 활용할 수 있는 조건부 렌더링에 대한 꿀팁을 알려드릴게요!논리 연산자 활용하기AND 연산자 import { useState } from 'react';function App() { const [show, setShow] = useState(false); const handleClick = () => setShow(!show); return ( 토글 {show && 보인다 👀} );}export default App;show 값이 true 이면 렌더링 하고, fal.. 2025. 1. 2.
(7)React로 데이터 다루기_7_오프셋기반_페이지네이션 구현하기 ● 이론0_ 데이터의 offset , limit , hasNext 속성 정의○ 데이터의 필드 구성 중 :offset : 현재 fetch 된 데이터의 수limit : 다음 fetch할 데이터의 수hasNext :- Api에 fetch할 데이터 수가 남아있다 => true- Api에 fetch할 데이터수가 남아있지 않다 => false● 이론1_ offset 기반 페이지네이션 구현 코드 작성하기○ 순서1_ Get 메소드의 query에 offset , limit 반영하기- Api.js//매개인자를 객체로 수정export async function getReviews({ order = "createdAt", offset = 0, limit = 6,}) { const query = `order=${orde.. 2025. 1. 2.
(1)React_배열Render, sort,delete ● 복습1_fetch + 배열 render하기○ App.jsimport { useState } from "react";import ReviewList from "./ReviewList";import { getReviews } from "../api";function App() { const [items, setItems] = useState([]); const handleLoadClick = async () => { const { reviews } = await getReviews(); setItems(reviews); }; return ( 불러오기 );}export default App;○ ReviewList.jsimport "./ReviewList.. 2025. 1. 2.
(6)React로 데이터 다루기_6_웹페이지를 열 때, 있는 데이터를 전부 불러오는 것이 아닌, 부분 데이터만 fetch하고, 필요할때만, 데이터를 fetch하기 => 페이지네이션(작성중..시발 존나어렵다) ● 이론1_ 페이지네이션(Pagenation) :○ 일반적 페이지네이션 예시 상황 :- 어떤 뉴스 웹페이지를 열 때, 모든 뉴스 데이터를 불러오는 것이 아닌, 일부분만 출력해주고,- '더 보기' 버튼을 누를 때, || 커서를 내릴 때, => 그 동작 후에 몇개의 데이터를 불러온다.○ 페이지 네이션 종류 : 2가지- 종류1_ 오프셋 기반 페이지네이션 : 데이터 개수를 기반으로 한 페이지네이션예) RequestGet https://example.com/posts?offset=20&limit=10해석 : offset = 20 //현재 20개의 데이터 불러온 상태인데,limit=10 //동작 후에는 10개를 더 보내주는 예약어- 서버로부터 받은 Response 내용{ "padding" : { "count.. 2024. 12. 31.

티스토리툴바