개발 🐾

TodoList의 디테일 페이지와 홈페이지를 오가면서 테스트한 staleTime 과 gcTimeHomeDetail  invalidateQuerise - 쿼리 무효화// Detail.jsx const { id } = useParams(); const fetchDetail = async () => { const response = await todoApi(`/todos/${id}`); return response.data; }; const { data, isLoading, error } = useQuery({ queryKey: ["todos", id], queryFn: fetchDetail, }); 홈 -> 디테일 페이지로 들어가면 params로 id를 요청하여 해당 tod..

스탠다드반에서 진행했던 90분의 타임어택 과제.1. 투두리스트를 tanstack query로 리팩토링2. 좋아요 버튼을 낙관적 업데이트로 리팩토링복습하며 tanstack의 개념에 대해 정리해보고자 한다.✔️ 투두리스트를 tanstack query로 리팩토링  useQuery 📍기존 로직fetchData 함수에서 비동기적으로 (async - await) 처리 중try, catch, finally로 데이터, 에러, 로딩 상태를 관리함useEffect를 사용하여 axios 요청을 받아 옴더보기// todos.jsimport axios from "axios";export const todoApi = axios.create({ baseURL: "http://localhost:4000",});// Home.js..

Context API와 Redux를 배우며 현재 과제(포켓몬 도감)뿐만 아니라 이전 과제(올림픽 트래커)에 적용해보는 시간을 가졌다.올림픽 메달 트래커 과제 구현 정리 (클릭) 두 가지를 구현하면서 가장 헷갈리는 것이 전역으로 관리할 상태를 골라내는 것이다.그래서 Context 파일에 모든 함수형 컴포넌트를 가져오게 된다.. 올림픽 프로젝트에서 함수 컴포넌트는추가, 삭제, 업데이트, 정렬 로 나누었다. Context 파일을 보며 고민한 것이 정렬 함수를 어디에 위치해야 하나 싶었다.(reducer로 만들기? List 컴포넌트에 두기?)  sort 로직 이해우선 정렬 로직을 살펴보자면 다음과 같다.// 정렬 함수 const [sortType, setSortType] = useState("gold"); ..

이전 글에서 RTK의 정의와 세팅하는 방법을 정리했다.https://coco910.tistory.com/79 [Pokemon PJ_Day 4] RTK (1) - setting필수 과제를 마치고 도전 과제인 RTK를 진행하였다. Context API를 사용한 로직에서 RTK로 바꾸려니 헷갈리는 부분이 많았다.크게 RTK를 세팅하는 방법과 사용하는 방법으로 정리해보겠다.이번 글에coco910.tistory.com이번 글에서는 사용하는 방법!  RTK use 📍Redux 2가지 핵심 개념 : useSelector, useDispatchuseSelector : 현재 state의 값을 조회useDispatch : state의 값을 추가, 삭제, 수정 📍최종 목표:[dispatch에 action 객체를 담아서 ..

필수 과제를 마치고 도전 과제인 RTK를 진행하였다. Context API를 사용한 로직에서 RTK로 바꾸려니 헷갈리는 부분이 많았다.크게 RTK를 세팅하는 방법과 사용하는 방법으로 정리해보겠다.이번 글에서는 세팅하는 방법!   RTK (Redux Toolkit) 란?리덕스 툴킷은 리덕스를 개량한 것리덕스를 사용하기 위해 작성했던 ducks 패턴의 요소들이 전체적인 코드의 양을 늘린다는 개발자들의 불만이 발생하기 시작했고, 리덕스 팀에서는 이것을 수용하여 코드는 더 적게, 그리고 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이 리덕스툴킷리덕스 툴킷은 우리가 배웠던 리덕스와 구조나 패러다임이 모두 똑같다.즉 새로운 것이 아니다. 리덕스의 전체 코드의 양을 줄이기 위해 새로운 API가 추가되었고 ..

💭configStore.js에서 store를 생성하고,main.jsx에 store를 주입하고,module을 만들며 reducer 함수를 생성했다. 이렇게 만든 reducer에게 어떻게 명령을 전달할 지,reducer는 받은 명령을 어떻게 처리할 지에 집중하여 다음 단계를 생각해봐야 한다. counter 앱의 세팅으로 조회 기능까지 완료.https://coco910.tistory.com/75 자식)으로의 state " data-og-host="coco910.tistory.com" data-og-source-url="https://coco910.tistory.com/75" data-og-url="https://coco910.tistory.com/75" data-og-image="https://scrap.k..

react에서 가장 중요한 부분이라고 할 수 있는 redux.redux가 무엇인지, 큰 흐름은 어떻게 되는지 정리해보겠다. redux란? 📍사용 이유useState의 불편함props를 통해서 단방향(부모 -> 자식)으로의 state 전달만 가능조부모 -> 자식 사이에 반드시 부모 컴포넌트를 거쳐야 함. 📍정의“중앙 state 관리소”를 사용할 수 있게 도와주는 패키지(라이브러리)컴포넌트 밖에서 따로 생성컴포넌트의 위치 상관없이 state 사용 가능Context API 보다 규모가 큰 state에서 유용  counter 앱 세팅 크게 네 단계로 나눌 수 있다.1. 리덕스 설정   1-1. 리덕스 설치   1-2. 폴더 구조 생성2. 설정코드 작성   2-1. configStore.js   2-2. st..

custom hook 📍특징input의 갯수에 따라 useState와 e.handler가 늘어나기 때문에 이를 간단하게 처리하기 위해 사용컴포넌트로 구현했던 useState와 handler를 따로 함수로 만듬 📍주의사항함수 이름은 use로 시작파일이름은 상관 X보통 src 폴더 > hooks 라는 폴더로 커스텀 훅들을 보관기능은 커스텀훅을 만들기전과 동일하게 작동하되, 중복코드가 사라지고 전체적인 코드의 양도 감소📍적용 방법js 파일에서 use~ 함수 생성이 훅은 [ ] 을 반환하는데, 첫번째는 value, 두번째는 핸들러를 반환함.value는 useState로 관리핸들러 로직 구현  // src/hooks/useInput.jsimport React, { useState } from "react";..

memoization 📍사용 이유하위의 자식 컴포넌트는 부모의 리렌더링에 따라 어쩔 수 없이 렌더링 된다.불필요한 렌더링이 발생하지 않도록 최적화반드시 필요한 경우에만 사용+) 모든 함수를 memo 처리한다고 해서 빨라지는 것은 아님. 결국 캐싱 처리한 값은 따로 저장해야하기 때문. Memo (React.memo) 📍특징컴포넌트를 캐싱 (hook X)함수형 컴포넌트를 사용 시, memo가 무효됨(좌측에 할당하듯 함수도 다시 생성됨 = 주소가 바뀜) 📍적용 방법렌더링을 막으려는 컴포넌트에서 export default React.memo(컴포넌트명)  useCallback 📍특징함수를 캐싱(hook O)함수형 컴포넌트(함수 자체)를 memo함수를 메모리 공간에 저장해두고(주소가 바뀌는 것을 막음) 특..

useContext 📍Prop drillingprops의 전달이 너무 깊어지면 발생하는 현상문제점 : 너무 깊어지면 prop이 어떤 컴포넌트로부터 왔는지 파악이 힘듬, 오류 발생 시 추적이 힘듬  📍전역 상태 관리(react context API)필수 개념createContext : context 생성Provider : context를 하위 컴포넌트에게 전달useContext : context를 구독하고 해당 context의 현재 값을 읽음  📍useContext 적용법 [App.jsx 파일 내에 적용 시]context 폴더 > js 파일(= context 파일 / 내부에 있는 모든 컴포넌트가 동일한 context를 유지)js 파일 내에서 creatContext(초기 값(null))을 변수에 할당,..