본문 바로가기

Develop/React13

useMemo React를 쓰다보면 한번쯤 Maximum update depth exceeded 오류를 볼 수 있다.최근에 나도 경험했는데.. 이 무한 렌더링 루프를 어떻게 해결했는지, 왜 나타났는지 정리해보려고 한다. 문제 상황 알림 목록 화면이 있었는데 여기에는 복잡한 문제들이 있었다.1. 여러 탭이 고정되어서 움직이지 않는 문제2. 탭이 고정되어 있지만 데이터는 다른 탭의 데이터가 나오는 문제3. 여러 알림 목록에서 더보기 버튼을 누르거나 특정 조건에서 페이지를 진입하면 Maximum update depth exceeded 오류와 함께 앱이 멈추는 현상4. 목록이 무한 루프를 돌게 되면서 더보기 버튼이 사라져버리는 문제 원인 분석 useNoticeList라는 커스텀 훅 안에는 화면을 렌더링할때마다 매번 .. 2025. 7. 27.
useEffect useEffect 리액트의 대표적인 Hook들에는사이드 이펙트를 처리하는 useEffect,컴포넌트의 상태를 관리하는 useState,React Context를 구독하는 useContext 등등 많은 Hook들이 있다. useEffect는 React Hook 중 하나로, 함수형 컴포넌트에서 사이드 이펙트(side effects)를 처리하기 위해 사용된다.사이드 이펙트란 데이터 페칭(API 호출), 구독 설정(이벤트 리스너), DOM 수동 조작, 타이머 설정(setTimeout, setInterval), 로컬 스토리지 접근, 외부 라이브러리 사용 등 컴포넌트의 렌더링과 직접적인 관련이 없는 작업들을 말한다. 기본 문법 기본 문법은 useEffect(setup, dependencies?)로 이루어져 있.. 2025. 5. 25.
webX React 18.2.0Vite 6.3.5TypeScriptscss npm create vite@latest prjtname -- --template react-ts && cd prjtname && npm install && npm install react@18.2.0 react-dom@18.2.0npm install -D sass//npm install -D typescript @types/react @types/react-dom @types/node 2025. 5. 17.
붕어빵 프로젝트 업데이트 v2.0 🎯v2.0 업데이트 내용  웹 사이트 주소 : https://www.ys2ys2.com/bbangmap/ 💡회원가입 기능 추가  ✅ 회원가입 기능을 추가하였습니다.✅ 회원가입은 이메일 인증을 통해 가입할 수 있습니다.  💡가게 데이터 입력 권한 변경  ✅ 로그인한 회원만 가게 데이터를 입력할 수 있게 변경하였습니다.✅ 비로그인 시 붕어빵 가게 정보 조회만 가능합니다.  💡반응형 CSS 추가  ✅ 헤더와 회원가입, 로그인에 대한 반응형 CSS를 추가하였습니다.     📒업데이트 공부하기 ❗ Spring Boot와 JPA를 활용한 회원가입 로직 붕어빵 가게 정보 입력은 회원만 가능하도록 하여 무분별한 등록을 방지하기 위해 회원가입 기능을 구현했다.비회원은 붕어빵 가게 정보 조회만 할 수 있고, 회.. 2025. 1. 16.
붕어빵 프로젝트 업데이트 v1.1 🎯v1.1 업데이트 내용  웹 사이트 주소 : https://www.ys2ys2.com/bbangmap/ 💡가게 정보 입력 폼 수정  ✅ 붕어빵 가게 정보 저장 시, 현재 위치나 특정 좌표를 선택해서 추가할 수 있게 개선하였습니다.  ✅ 지도 클릭 시 클릭된 곳에 마커를 찍고, 입력 폼에는 클릭된 곳의 좌표를 제공하는 기능을 추가하였습니다.      📒업데이트 공부하기 초기에 데이터를 저장하는 방식을 고민했을 때, 사용자가 모바일 기기로 직접 붕어빵 가게까지 가서 저장하는 것으로 정하고 만들었었다.실제로 반응형CSS를 통해서 내가 직접 돌아다니면서 붕어빵 가게로 가서 사진도 찍고 현재 위치를 실시간으로 받아서 저장이 되게 하였다.하지만 날씨 등등 다른 제약사항이 생길 때는 움직여서 좌표를 구하고 저.. 2025. 1. 9.
붕어빵 프로젝트 업데이트 v1.0 🎯v1.0 업데이트 내용  웹 사이트 주소 : https://www.ys2ys2.com/bbangmap/기능적인 부분들이 추가돼서 버전을 업데이트 했습니다.   💡거리뷰 기능 추가   ✅ 해당 가게에 대한 거리뷰 기능이 추가되었습니다. 💡길 찾기 기능 추가   ✅ 해당 가게까지의 길 찾기 기능이 추가되었습니다. 길찾기 기능은 다양한 환경(웹 및 모바일)에서 작동되게 구현했습니다.자동차, 버스, 도보, 자전거 등 여러 운송수단 중 원하는 방식을 선택하여 경로를 확인할 수 있습니다.           📒업데이트 공부하기 ❗ 거리뷰거리뷰 기능을 추가했다. DB에 저장된 x,y좌표를 가지고 해당 좌표에 마커를 그리는 컴포넌트는 bbangmap이다.axios 요청으로 가져온 DB값은 fishstores에 .. 2024. 12. 26.