전체 글
-
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..
-
Arrow Function 을 다시 알기JavaScript 2023. 11. 26. 12:58
전달하는 인자값과 호출하는 것이 같으니까 그냥 함수의 참조값만 전달해줘도 된다. 그게 더 깔끔하다. 아래 코드에서 onFilterChange에 대한 부분을 보도록 하자! Before) const filters = ['all', 'active', 'completed']; function App() { const [filter, setFilter] = useState(filters[0]); return ( setFilter(filter)} /> ); } After) const filters = ['all', 'active', 'completed']; function App() { const [filter, setFilter] = useState(filters[0]); return ( ); }
-
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..