전체 글101 27일차 (react-router-dom :outlet) outlet은 children과 같다고 보면 된다. 하위 라우터를 감싸는 상위 라우터에서 하위 컴포넌트를 출력하고 싶은 위치에 을 넣어주면 된다. import React from "react"; import { Outlet, useNavigate } from "react-router-dom"; function Main() { const navigate = useNavigate(); const logoutBtn = () => { navigate("/"); }; return ( 🏠 로그아웃 ); } export default Main; 그리고 Router.js 페이지에서 상위 Route 안쪽으로 감싸주기만 하면 된다. 2023. 9. 14. 26일차 (react-Cookie) react-Cookie를 사용하기 위한 Router.js 파일 // 최상단을 CookiesProvider로 감싸주면 됨 import React from "react"; import { BrowserRouter, Route, Routes } from "react-router-dom"; import { CookiesProvider } from "react-cookie"; function Router() { return ( ); } export default Router; Cookie를 관리할 수 있는 새로운 js 파일 생성 후, 쿠키 관리 import { Cookies } from "react-cookie"; const cookies = new Cookies(); // 쿠키 저장 export const se.. 2023. 9. 12. 25일차 (useQueries) db에서 todos와 users라는 키를 가진 데이터 두 개를 가져오려고 했을 때 발생한 문제 => useQuery로 데이터를 가져오게 되면 const {isError, isLoading, data} = useQuery("QueryKey", QueryFunction)으로 가져오기 때문에 변수명이 중복되는 경우가 생긴다. 이때 useQuery 대신 useQueries를 사용하면 두 가지 모두를 가져올 수 있다. import {useQueries} from "react-query" const Component = () => { const [usersQuery, todosQuery] = useQueries([ { queryKey: 'users', queryFn: getUsers, }, { queryKey: '.. 2023. 9. 11. 5주차 WIL (React Hook) useState // 현재 상태 값과 이를 업데이트할 수 있는 함수라는 두 가지 요소가 포함된 배열을 반환 const [count, setCount] = useState(0); useEffect // 의존성 배열의 값이 변경됐을 때 렌더링 useEffect(() => { return () => { // Cleanup code }; }, [dependencyArray]); useContext // 컨텍스트 객체(React.createContext에서 반환된 값)를 수락하고 해당 컨텍스트에 대한 현재 컨텍스트 값을 반환 const value = useContext(MyContext); useCallback // 종속성 배열 중 하나가 변경된 경우에만 변경되는 메모화된 버전의 콜백 함수를 반환 const me.. 2023. 9. 10. 이전 1 ··· 13 14 15 16 17 18 19 ··· 26 다음 728x90