React/react
-
react-router-domReact/react 2023. 12. 5. 12:41
react-router에서 자주 사용했던 함수들을 정리, useParams() path: '/videos/:keyword ' path 값의 페이지에서 param 값을 가져올 수 있다. import { useParams } from "react-router-dom"; const { keyword } = useParams(); useNavigate() onclick={() => navigate(`/videos/watch/${video.id}`)} window.location 과 vue의 router.push 로 생각해주면 되겠다. import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); useLocation() onClic..
-
custom hooks / useQuery(tanstack/react-query)React/react 2023. 7. 24. 13:00
커스텀 훅은 use 라는 이름을 사용해줘야하고 일반 컴포넌트처럼 동일하게 useState, useEffect, useCallback, useMemo 등 다 사용 가능 원하는 데이터를 반환하면 된다(return [loading, error, products];) ----------------------------------------------------------------------------------- 2023.12.05 커스텀 훅 보다 'tanstack/react-query' 를 사용하는 게 훨씬 편하다! queryKey은 필수 값 이다, 키 값을 입력해주고 Array에 넣어주기 때문에 여러 개의 키 값을 넣어줘도 된다. queryFn에는 data로 불러 올 promis 값을 넣어준다. const..
-
Context 란?React/react 2023. 7. 24. 12:35
context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. 일반적인 React 애플리케이션에서 데이터는 위에서 아래로 (즉, 부모로부터 자식에게) props를 통해 전달되지만, 애플리케이션 안의 여러 컴포넌트들에 전해줘야 하는 props의 경우 (예를 들면 선호 로케일, UI 테마) 이 과정이 번거로울 수 있습니다. context를 이용하면, 트리 단계마다 명시적으로 props를 넘겨주지 않아도 많은 컴포넌트가 이러한 값을 공유하도록 할 수 있습니다. context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. 아래 코드를 보면, 1. createContext로 Con..
-
useCallback();React/react 2023. 7. 19. 13:25
기록 useCallback 이란? useCallback을 handleUpdate 함수에 넣지 않았더라면 Button 컴포넌트에서 onClick 이벤트가 발생할 때마다 AppMentor 함수가 재랜더링 됐을 것이다. 하지만 useCallback 를 사용하고 디펜던시를 넣어줌으로서 디펜던시에 있는 값들에 변화가 있을 시에만 재랜더링을 해주도록 하였다. 아래 코드에서는 따로 디펜던시 값이 필요 없었기 때문에 빈 배열 '[ ]' 값을 주었다. import React, { memo, useCallback, useMemo, useReducer } from 'react'; import personReducer from './reducer/person-reducer'; export default function App..