React

node.js 설치 npm 툴 이용 가능 create-react-app 라이브러리 이용 가능VScode 설치 코드짤 폴더 생성 - git/ React class터미널 열고 프로젝트명 입력: success 확인npx create-react-app blogact-app

JSX 문법

변경함수를 써야한다let 글제목, 글제목변경 = useState('맛집 추천!', '신발 추천!', '옷 추천!'); 글제목변경 ();state 원본은 건들지 않고 deep copy해서 수정사항 변경한다var newArray = ...글제목;newArray0 = '맛있

npm install react-router-dom

ES6의 Promise 기반 APIHTTP 응답 상태코드: ok -> response 객체로 반환JSON 객체가 아니므로 response.json() 을 호출하여 데이터를 추출기본 브라우저 API로 라이브러리 설치 불필요Promise 기반 APIHTTP 응답 상태 코드

useParams() : URL 매개 변수를 추출하는 React Router 훅

인자로 콜백함수를 받는다렌더링 될때 마다 실행화면에 첫 렌더링 될때 실행화면에 첫 렌더링 될때 실행value 값이 바뀔때 실행

useEffect, useState는 함수 형태로 제공: 이 함수들은 모듈에서 export된 값( named export )이기 때문에, import 시에 {} 안에 담아서 불러와야 한다: <-> React (default export)로 내보낸 값은 {} 없이

테이블 행을 누르면 해당 글 상세보기로 이동이 되는 구조글 상세보기 시 페이징처리된 페이지 번호를 알수 없음 \-> 테이블 행 클릭 시 상세보기로 이동(navigate) + 페이지 번호(state) 넘김이전 버튼 클릭 시 리스트에서 받아온 해당 글이 있던 페이징의 pa

Pagination List controller

이전 페이징 처리는 제한없이 데이터에따라 페이지매김 수가 계속 생김\-> 처음으로 가는 버튼과 마지막으로 가는 버튼이 없어서 추가 수정\-> 5페이지씩 보여지게 수정

npx create-next-app@latestsrc/app 구조: app 폴더 > 라우팅(주소)과 관련된 파일: 그 외

기본적으로 layout.tsx가 page.tsx를 포함\-> RootLayout 최상위 레이아웃 > children > 페이지를 이동할 때 마다 page layout 가 children 안으로 들어감 계정 생성 페이지 작성: /i/flow/signup주소에

리액트 쿼리 React Query 리액트 어플리케이션에서 서버 상태를 효율적으로 관리하는 라이브러리 클라이언트 상태 Client State 사용자 인터페이스 UI와 관련 된 상태 ex) 모달의 오픈 여부, 언어, 테마 등 useState 서버에서 일어나는 일과 관

const queryClient = new QueryClient();QueryClient 인스턴스 생성 : 이 객체가 전역적으로 데이터를 캐싱, 서버 상태를 관리하는역할 QueryClientProvider로 컴포넌트 감싸기React Query를 컴포넌트에서 사용하려면,

isFetching : 로딩 해당 코드 적용 후 isPending vs is isFetching 비교 refetch() 실행 시 "Fetching 중" 으로 표시됨 -> 데이터를 새로 불러오는 중임을 알려줌 isPending : 최초 쿼리 실행 시 true (

에러 발생retry: React Query는 기본적으로 실패 시 무한 재시도(retry: true)enabled : 쿼리를 자동 실행할지 여부를 결정: 기본값 true → 컴포넌트 마운트 시 바로 실행: false → 최초 실행을 막고, 필요할 때만 실행하도록 제어re

npm i -D @tanstack/eslint-plugin-queryeslint.config.js 파일 설정npm i @tanstack/react-query-devtools