민ズl으l 개발일ブl

tanstack query란🤔서버 상태를 관리하기 위한 라이브러리 tanstack query 훅🪝useQueryget : R서버에서 데이터를 가져오는 데 사용결과는 자동으로 캐싱되고, 다시 같은 데이터를 요청하면 캐시에서 가져와 빠르게 보여줌데이터가 변했을 때, 자동으로 갱신(refresh)useMutationmodify : CUD데이터를 생성(Create), 수정(Update), 삭제(Delete)할 때 사용서버에 변경 요청을 보내고, 성공/실패 결과를 알려줌요청 후 데이터를 다시 가져오려면 수동으로 invalidateQueries를 호출해야 해야함invalidateQueriesrefresh특정 데이터(쿼리)를 다시 가져오게 함(refresh)캐시를 지우고 서버에서 최신 데이터를 가져오게 만들어줌보..

axios란🤔http를 이용해서 서버와 통신하기 위해 사용하는 패키지 axios 사용c - 생성const onSubmitHandler = async(todo) => { await axios.post("http://localhost:4000/todos", todo);};r - 읽기const { data } = await axios.get("http://localhost:4000/todos");u - ✔️patch(변경하는 항목만 바꿔줌) / put(이전 데이터를 무시하고, 덮어씌움)const onClickEditButtonHandler = (todoId, edit) => { axios.patch(`http://localhost:4000/todos/${todoId}`, edit);};d - 삭제co..

context api 단점1. 복잡한 설정context가 많으면 밑에 코드처럼 복잡해지고, 유지보수가 어렵다 ... 2. 성능context는 Provider 하위의 모든 컴포넌트를 리랜더링, 불필요하게 업데이트될수 있음redux 설명store애플리케이션의 전체 상태 트리를 보유하는 중앙 저장소각 컴포넌트가 스토어의 특정 상태를 "구독"직접 조작x리듀서 함수이전 상태와 액션 객체를 받아 새로운 상태를 반환하는 순수 함수input : old state + dispatched Action => Output : New State Object*reducer 메소드, useReducer 훅이랑 다름action상태 변경에 대한 정보를 포함한 객체액션 객체는 type 속성을 반드시 가져야 하며, 추가적인 데이..

props drilling을 피하기 위한 전역상태관리 1. context.js파일 만들어서 context 생성!// context/SampleContext.jsimport { createContext } from "react";export const SampleContext = createContext(null);2. 최상단에 context provider 묶어주기import { SampleContext } from "./context/SampleContext";return ( ... );3. 사용할 곳에서 context에서 가져오기!import React, { useContext } from "react";import { SampleContext } from "../context/Samp..

전에 프로젝트에서 form태그에 핸들링을 useState로 관리했는데, 이를 더 간략하게 해주는게 있었따!!!//전const initialInputValue = { country: "", gold: 0, silver: 0, bronze: 0,};const handlSubmitToAdd = (e) => { e.preventDefault(); const newValue = { ...overallInputData, id: Date.now(), }; setSavedData([...savedData, newValue]); initState(); }; const handleChange = (e) => { setOverallInputData({ ...

React의 렌더링 조건props 변경될때마다state가 변경될때마다💩 부모 컴포넌트가 다시 렌더링되면 해당 모든 자식의 컴포넌트도 불필요하게 다시 렌더링될 수 있음!이를 위해 사용하는 것들👇👇👇memoization처음 계산해 놓은 결과를 메모리상에 저장해 두고, 그 저장된 메모리 주소를 필요할때 꺼내서 사용하는 방법반환값을 캐싱하는 것최적화 기법memo(React.memo)자식 컴포넌트를 메모이제이션함리액트 고차 컴포넌트(HOC)임* 고차 컴포넌트(HOC) : 어떤 컴포넌트를 인자로 받아서 최적화된 새로운 컴포넌트로 반환🚫꼭 필요할때만 사용하기1. 컴포넌트가 같은 props로 자주 렌더링 될때2. 컴포넌트가 렌더링이 될때마다 복잡한 로직을 처리해야 할때오직 Props 변화에만 의존하는 최적화 ..

context란부모 컴포넌트가 트리 아래에 있는 모든 컴포넌트에 prop drilling없이 사용할 수 있게 해줌🚫context를 사용하면 컴포넌트를 재사용하기 어려워 질 수 있음* prop drillinguseContext란🤔컴포넌트에서 context를 읽고 구독할 수 있는 훅 context API  사용 및 개념1. createContext : context를 생성기본값 지정 : context providers를 찾을 수 없는 경우 기본값으로 반환import React, { createContext, useContext, useState } from 'react';// Context 생성const ThemeContext = createContext(null) // 기본값 : null 2. Prov..

useRef란🤔useState처럼 값을 저장하는 hook🌟리랜더링과 상관없음 🌟, DOM 요소를 다루기 위한 용도로 주로 사용.current하면 현재 useRef의 값에 접근useRef vs useStateimport "./App.css";import { useRef, useState } from "react";function App() { const [count, setCount] = useState(0); const countRef = useRef(0); const plusStateCountButtonHandler = () => { setCount(count + 1); }; const plusRefCountButtonHandler = () => { countRef.curren..

useEffect란🤔리액트 컴포넌트가 렌더링 된 이후마다 특정 작업을 수행하도록 설정할 수 있는 HookuseEffect가 속한 컴포넌트가 화면에 렌더링된 이후 실행callback함수를 받음useEffect 실행렌더링 될때마다 매번 실행useEffect(()=>{ //작업...});랜더링된후 단 한번만 실행useEffect(()=>{ //작업...},[]);마운팅 + 의존성배열 값이 바뀔때마다 useEffect를 실행useEffect(()=>{ // 작업...}, [의존성배열]);컴포넌트 라이프 사이클리액트 컴포넌트도 태어나고(mount), 업데이트되고(Update), 죽는(unMount) 생애주기가 존재

useState란🤔가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 갖음const [state, setState] = useState(initialState);state는 변수, setState는 state값을 수정하는 함수 state를 업데이트 하는 방법은 두가지가 있음// 기존에 사용하던 방식setState(number + 1);setState(number + 1);setState(number + 1); // + 3이 아니라 +1만 처리됨// 함수형 업데이트 setState((previousState) => previousState + 1);setState((previousState) => previousState + 1);setState((previousState) => previou..