전체 글212 132. [React] Error: No QueryClient set, use QueryClientProvider to set one TIL23.02.22 [React] Error: No QueryClient set, use QueryClientProvider to set one 리액트 쿼리 사용하려고 코드를 작성했는데 위와 같은 오류가 났다. 오류 원인 App.jsx에서 div로만 감싸서 오류가 났다. function App() { return ( ); 해결 QueryClientProvider 컴포넌트로 감싸야 했음 import { QueryClient, QueryClientProvider, } from "@tanstack/react-query"; function App() { return ( ); } 2023. 2. 22. 131. [Reat] React Router TIL 23.02.20 [React Router] 오늘은 React Router에 대해서 공부했다. Router를 공부하면서 전에 프로젝트할 때 js로 url 요청했던 것들이 생각도 나서 익숙했음. React Router는 간단하게 설명하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것 1. 설치 yarn add react-router-dom 2. 사용 예시 import './App.css'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; //여기 임포트해서 사용하면됨 const router = createBrowserRouter([{ path: '/', // 경로 element: , //해당 경로에 나올 컴포넌트 er.. 2023. 2. 20. 130. [React] useState 사용하여 상태값 초기화 TIL 23.02.17 useState 사용하여 상태값 초기화 todolist를 만들던 중 const [todos, setTodos] = useState(storage()); const [todos, setTodos] = useState(() => storage()); (축약: const [todos, setTodos] = useState(storage); 코드 차이가 너무 헷갈렸음 그래서 구글링을 해봄 React에서 useState를 사용하여 상태값을 초기화하는 방법은 크게 두 가지 있음 1. 함수 호출을 통해 초기값을 전달하는 방법 const [todos, setTodos] = useState(storage()) 위 코드와 같이 함수의 반환값을 초기값으로 전달하는 방법. 이 방법은 컴포넌트가 렌더링 될 때마다 함수가 실행되.. 2023. 2. 17. 129. [React] Warning: Invalid DOM property `for`. Did you mean `htmlFor`? TIL 23.02.15 Warning: Invalid DOM property 'for'. Did you mean 'htmlFor'? 아래와 같이 코드를 작성했는데 콘솔창에 오류가 떴음 오류 오류에서도 친절히 알려줌 "htmlFor 쓰려고 했던거 아니야?" 원인 jsx는 javaScript이기 때문에 for은 반복 의미를 가지고 있다. 그래서 태그에 for 부분에서 오류가 남 해결 for 대신 htmlFor로 고치기만 하면 됨 2023. 2. 15. 128. React useMemo,memo, useCallback 정리 TIL 23.02.14 useMemo, memo, useCallback 정리 1. React,memo : 단순 UI 컴포넌트의 리렌더링 방지(props가 들어가는 순간 리렌더링 됨) 2. useMemo : props로 전달받은 함수를 실행해서, 그 결괏값을 보존(deps(의존성배열)가 하나라도 변하면 함수를 다시 실행해서 그 결괏값을 보존) 3. useCallback: props로 전달받은 함수를 보존 (deps가 하나라도 변하면 그에 맞는 새로운 함수를 리턴) React.memo로 전부 커버가 안되는 이유는 props = 함수 또한 객체이기 때문에 부모 컴포넌트가 리렌더링 될 때마다 얘도 같이 새로운 참조값(주소값)을 가지게 됨. 따라서 React.memo는 "새로운 객체(함수)가 props로 들어왔구나"라고 인식해서 리렌더.. 2023. 2. 14. 127. JS 화살표함수 () => (), () => {return...} TIL 23.02.13 화살표함수 () => {return...}, () => () 오늘 코드 작성하던 중 const a = () => () const a = () => {} 이런 식으로 두 가지 방법으로 사용하길래 헷갈려서 구글링 좀 해봤다. {}가 들어가면 return이 와줘야 함 const a = () => { return b === c } 함수 몸체가 한 줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return이 됨 const a = () => b===c () 오거나 리턴 하고 싶은 값이 바로 따라오면 암시적으로 리턴하게 됨. return을 적으면 오류남 const a = () => b === c 어떤 코드를 써도 상관없다. 간결한 건 아래코드. 2023. 2. 13. 126. React fech 무한루프 TIL 23.02.10 fech 무한루프 .jsx파일로 외부데이터를 연결하기 위해 fetch를 사용했는데 무한루프가 걸렸다. 코드는 아래 코드처럼 작성함 import React, { useEffect, useState } from 'react'; function Products() { const [products, setProducts] = useState([]); const [checked, setChecked] = useState(false); const handleChange = () => { return setChecked(prev => !prev) } fetch(`data/${checked ? 'sale_' : ''}products.json`) .then((res) => res.json()) .then((data) =.. 2023. 2. 10. 125. JS Callback 사용이유 TIL 23.02.09 Callback 사용이유 콜백함수 : 함수를 등록하기만 하고 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수 콜백함수는 때로 가독성이나 코드 재사용 면에서 사용됨 비동기 방식으로 작성된 함수를 동기 처리하기 위해 사용됨 2023. 2. 9. 이전 1 2 3 4 5 6 7 ··· 27 다음 728x90
