Web/React (6) 썸네일형 리스트형 [REACT] React 기본 Hooks REACT v17 기준으로 작성된 글 입니다. useState 리엑트의 근본, 리엑트에서 값 저장 용도로 사용한다. 값을 할당 받고, 값과 변환 함수 ( Set ) 를 반환한다. State 값이 변하는 경우 렌더링이 발생한다, 즉 다시 그림을 그린다. 변환 함수 ( Set ) 은 콜백을 인자로 받아 기존 상태값을 얻을 수 있다. 기본 사용법 import React, { useState } from "react"; const App = () => { const [name, setName] = useState(""); return ( 내 이름은 { name } ) } return App; 여러 input 태그에 state 하나로 바인딩 하는 방법 import React, { useCallback, useSt.. [REACT] react router “/” handling '/' 제거 react router로 url 조작시 끝에 가끔 '/' 가 붙는 경우가 발생한다. 평상시에는 문제가 되지 않지만 세밀한 path 처리나 외부 라이브러리 가 서로 다르게 인식하는경우 ex) /home/123 , /home/123/ 를 다르게 인식한다. 따라서 명시적으로 path 끝에 '/' 가 붙는걸 막는다. import { useNavigate, useLocation } from 'react-router-dom'; function Component() { const navigate = useNavigate(); const location = useLocation(); useEffect(() => { if (location.pathname.endsWith('/')) { navigate(loc.. [REACT] react-query 에러 순서 Query 에러 처리 retry - 옵션을 통해 여러번 호출하더라도 에러 처리는 한번만 실행한다. global error new QueryCache 로 인스턴스를 생성후 내부에 에러 처리를 설정한다. 내부 쿼리에 onError 설정을 하더라도 에러를 처리한다. const queryClient = new QueryClient({ queryCache: new QueryCache({ onError: (error) => { console.log("global error"); }, }), }); default error 모든 쿼리에 대해 기본 에러를 설정한다. 만약 다른 쿼리 내부에 onError 처리 설정시 default error 는 동작하지 않는다. const queryClient = new QueryCli.. [REACT] react-query (v3) react-query (v3) 설치 및 공식문서 Installation | TanStack Query Docs You can install React Query with NPM, Yarn, or a good ol' `` via unpkg.com. tanstack.com npm i react-query react-query 에서 사용되는 용어 fresh, stale fresh 는 신선한, stale 은 상한 의 의미를 가지는 영어 단어 데이터를 받아오면 fresh 상태 에서 stale 로 변경된다. 웹은 stateless 기 때문에, 클라이언트 영역의 데이터와 서버의 데이터의 정합성을 실시간으로 유지할 수 없다. refetch 의 조건 새로운 query instance가 마운트 될 때 ( 페이지 이동 ) .. [REACT] Unexpected token '<' issue 🔥 Uncaught SyntaxError: Unexpected token ' [REACT] CRA version up issue 🔥 create-react-app 사용시 버전관련 이슈 CRA 명령어를 이용하여 프로젝트 설치시 실패하는 경우가 발생. 새로운 CRA 버전이 릴리즈 되어 서로 충돌하는 경우. You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) $ npm uninstall -g create-react-app $ npx clear-npx-cache There might be incorrect information or outdated content. 이전 1 다음
