짬짬이기록하기

항목 store.getState() useSelector()사용 위치컴포넌트 외부, 일반 함수React 함수형 컴포넌트 내부자동 리렌더링 여부❌ 상태 변경 시 자동 반영되지 않음✅ 상태 변경 시 컴포넌트 리렌더링됨용도비동기 처리, 외부 모듈, 초기 설정 등UI에서 상태를 구독하고 표시할 때리액트 훅인가?❌ 아니요✅ 예, 훅입니다

하위 컴포넌트들의 로딩이 생기는 모든 상황에 대해 Suspense의 fallback 로딩으로 대응함 }> // Error message도 하나로 보여주겠다. }> page 단위를 로딩할 때 lazy 로딩을 사용할 수 있다. (page 단위의 컴포넌트에 접근할 때 로드해옴, 주로 app.jsx 에서 사용할 수 있음)const MoviePage = React.lazy(()=> import("./pages/MoviePage")); 컴포넌트 단위안에서 로딩할 때는 (컴포넌트 내에 data fetch를 해올 때 suspense를 사용할 수 있다) return useQuery({ queryKey: ['current-user-profile'], ..

Outlet : Routes, Route에 의해 선언된 Nested Routing을 구현할 때, 하위 route들이 표현될 위치를 지정함 // routes 구조 예시 }> } /> } /> // DashboardLayout.tsximport { Outlet } from 'react-router-dom';const DashboardLayout = () => { return ( Dashboard {/* 자식 라우트가 이 위치에 렌더링됨 */} );};export default DashboardLayout;

import { useQueries } from "@tanstack/react-query";import axios from "axios";const Reactquery = () => { const ids = [1, 2, 3, 4]; const fetchPostDetail = (id) => { return axios.get(`http://localhost:3004/posts/${id}`); }; const result = useQueries({ queries: ids.map((id) => { return { queryKey: ["posts", id], queryFn: () => fetch..

import { useQuery } from "@tanstack/react-query";import axios from "axios";const ReactQuery = () => { const fetchPosts = () => { return axios.get("http://localhost:3009/posts"); }; // useQuery는 didMount일때 바로 실행된다. const { data, isLoading, isError, error, refetch } = useQuery({ queryKey: ["posts"], queryFn: fetchPosts, retry: 1, select: (data) => { return data.data; }, ..

- form onSubmit 을 이용하게 되면 페이지가 새로고침 된다. 이것을 막기 위해 event.preventDefault() 로 이벤트 기본 동작을 막아주면 새로고침이 방지된다. - useNavigate, Navigate 차이점 useNavigateNavigate 사용 방식함수로 호출컴포넌트처럼 JSX에서 사용 사용 위치함수형 컴포넌트 내부JSX 내 어디서든 주요 용도버튼 클릭, 이벤트 기반 이동조건부 리디렉션 (자동 이동) 클래스 컴포넌트❌ 직접 사용 불가⭕ 사용 가능- zustand : 공통 상태 관리 라이브러리import { create } from "zustand";const countStore = create((set) => ({ count: 0, increase: () => ..

route 설정 : Route path="/products/:id" element={ProductDetail />} />url 경로 : /products/454?q=skirt&f=female&num=5 const param = useParams(); // 파라미터 가져옴 const [query, setQuery] = useSearchParams(); // 쿼리 가져옴 console.log("파라미터:", param); // 454 console.log("쿼리:", query.get("q")); // skirt

import React, {Component} from 'react'import PropTypes from 'prop-types'class PropsComponent extends React.Component { myFun(x,y) { console.log(`myFun call: ${x + y}`) } user = { name: 'kim', age: 20, } arr = ['hello', 'world'] render() { return ( Props Test ) }}class PropsSubComponent ..