🔥React 뽀개기11 페이지네이션 초간단 구현하기 (React) 📄리액트로 페이지네이션 초간단 구현하기1. 기본 설계페이지네이션은- 현재 페이지- 전체 페이지 수- 한 페이지에 표시할 개수가 필요하다!const [currentPage, setCurrentPage] = useState(1);const itemsPerPage = 4; 2. 데이터 필터링const totalPages = Math.ceil(filteredHabits.length / itemsPerPage);const displayedHabits = filteredHabits.slice( (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage,);한 페이지 당 4개가 보여야 하기때문에 slice를 해준다!!ex) currentPage가 1일 때, (1.. 2024. 12. 23. path를 따라가는 로딩화면 구현하기 ✈️path를 따라가는 로딩화면 구현하기import React from 'react';type LoadingProps = { width?: number;};export default function Loading({ width = 1200 }: LoadingProps) { return ( {/* 비행 경로를 따라 선을 그리기 위한 경로 */} {/* 비행기 모양 */} );}useLoadingrouteChangeStart(url, { shallow }) - 라우트.. 2024. 8. 16. Toast 공통 컴포넌트 만들기 (feat.react-toastify) react-toastify로 토스트 구현하기공통컴포넌트로 만들기 (성공, 실패, 에러, 멘트 프롭으로 받기)https://fkhadra.github.io/react-toastify/icons Icons | React-ToastifyBuilt-in iconsfkhadra.github.io error)react-toastify의 타입스크립트 사용 시, position 속성이 string 타입으로 정의되어 있어서 발생하는 오류다. position 속성은 ToastPosition 타입으로 설정해야 한다.import React from 'react';import { ToastContainer, ToastPosition, toast } from 'react-toastify';import 'react-toastify.. 2024. 8. 8. react-hook-form + yup = 회원가입/로그인(feat.쿠키) ✨회원가입react-hook-form & yup으로 폼 제출하기👇🏻기본 틀 const { register, handleSubmit, formState: { errors, isValid }, trigger, } = useForm({ resolver: yupResolver(authSchema), mode: 'all', }); // confirmPassword를 제외하고 폼 제출 const onSubmit: SubmitHandler = ({ confirmPassword, ...data }) => { console.log('폼 제출', data ); }; return ( .. 2024. 8. 2. input 공통 컴포넌트로 만들기 (feat. react-hook-form + yup) 리액트 훅 폼+yup을 사용해 input 공통 컴포넌트 만들기✨초기작업타입에 따라 input 분기처리하기import { passwordOffIcon, passwordOnIcon } from '@/libs/utils/Icon';import Image from 'next/image';import React, { useState } from 'react';import { FieldError, UseFormRegisterReturn } from 'react-hook-form';type InputProps = { label: string; name: string; type?: 'text' | 'password'; placeholder: string; register: UseFormRegisterRetur.. 2024. 8. 1. 라이브러리 없이 state로 폼 만들기 주요 기능폼 POST 요청폼 입력값 유효성 + 오류 메시지 출력하기아이돌 검색등록 후 list 페이지로 이동✅api GET으로 있는 아이돌 목록 띄우기페이지사이즈를 크게해서 모든 데이터를 다 불러오기… // get: 리스트 보여주기 const getIdolsData = async () => { setLoading(true); const result = await getIdols({ pageSize: 10000 }); const idolsList = result.list; // 기존 아이돌 리스트 뒤에 연달아 나와야 함 setIdolsData(idolsList ); }; useEffect(() => { getIdolsData(); }, []);🌻폼 채우고 데이터 .. 2024. 7. 31. 스크롤시 투명한 배경에서 배경색 넣기(feat. 화살표 클릭 시 맨 위로 이동하기) 스크롤시 투명한 배경에서 배경색 넣기bg에 이미지를 넣어놔서 처음 헤더를 transparent로 설정해줬다.메인 화면의 내용이 많아질수록 스크롤이 생길텐데 스크롤 하면 헤더에 배경색을 설정해줘서 내용이 겹쳐지는 현상을 방지해야 했다.✨ 스크롤시 투명한 배경 → 색 넣기const scrollStyle = { base: 'bg-transparent text-black', scroll: 'bg-black text-white',}export default function Header() { const [scrollPosition, setScrollPosition] = useState(0) useEffect(() => { const handleScroll = () => { setScrollP.. 2024. 7. 27. 서버 상태 💞 클라이언트 상태 React Query는 주로 서버 상태를 효율적으로 관리하기 위해 설계되었다. 이전에는 서버 상태를 클라이언트 상태와 함께 관리하면서 발생하는 복잡성을 줄이는 것이 어려웠다.-> 코드의 양이 늘어나고, 데이터 동기화와 캐싱 문제 등으로 어려움을 겪었다.React Query는 이러한 문제를 해결해 주며, 서버 상태를 효과적으로 관리하고, 비동기 데이터 페칭, 캐싱, 자동 리패칭 등의 기능을 통해 개발자가 좀 더 쉽게 서버 상태를 다룰 수 있도록 한다.[🔥React 뽀개기] - React Query 왜 씀? React Query 왜 씀?리액트 쿼리를 배우기 전에는 그냥 무한스크롤 구현하는데 쓰이는 애인줄 알았다.근데 찍먹해봤더니 뭐지?? 서버 상태 불러오고, 캐싱하고, 지속적인 업데이트가 가능..?Reac.. 2024. 7. 20. React Query 왜 씀? 리액트 쿼리를 배우기 전에는 그냥 무한스크롤 구현하는데 쓰이는 애인줄 알았다.근데 찍먹해봤더니 뭐지?? 서버 상태 불러오고, 캐싱하고, 지속적인 업데이트가 가능..?React Query 도입 이전에는...서버에서 가져온 데이터를 클라이언트 상태와 함께 관리해야 했기 때문에, 상태 관리 라이브러리(Redux)를 사용해야 하는 경우가 많았다.리덕스는 상태를 변경하기 위해서는 액션을 생성해야 하고, 이를 처리하기 위한 리듀서를 작성해야 한다. 이 과정에서 각 액션에 대한 타입을 정의하고, 리듀서를 구현하는 코드가 늘어난다. 그래서 간단한 상태 변경에도 많은 코드가 필요하게 되는 경우가 많다. 결국 코드의 양이 늘어나고, 관리해야 할 상태가 많아져서 오히려 버거워지는 결과를 초래했다.비동기 데이터를 React .. 2024. 7. 20. 이전 1 2 다음 반응형
