리액트

🌱 문제 상황마이페이지에서 내가 '리뷰 남긴 테마'와 '좋아요 누른 테마'로 구성된 탭을 눌렀을 때, 눌린 탭별로 테마 리스트가 업데이트되어야 합니다.그러나 테스트 도중, 아래의 움짤처럼 한쪽 탭에 아무 값도 존재하지 않을 때(아래는 리뷰 남긴 테마가 0개이고, 좋아요 누른 테마가 2개인 경우), 한쪽 탭에 해당하는 리스트 값이 다른 탭에 남아있는 오류를 발견하였습니다.기존에는 아래의 코드처럼 productMenuContents라는 배열로 메뉴 탭을 정의하고, 현재 선택된 메뉴 탭의 id값을 상태로 관리하였습니다.그리고 메뉴 탭을 나타내는 버튼()을 클릭할 때마다 onClick 이벤트로 탭 id 상태값을 변화시키고,useInfiniteQuery를 포함하는 파일에 쿼리키를 위한 파라미터로 메뉴 탭의 타입..

🌵 모달이란모달이란 현재 열려있는 페이지에 포함된 창으로, 페이지 위에 일종의 '레이어(층)'을 까는 것을 말합니다.현재 페이지를 '부모', 현재 페이지에서 열린 모달을 '자식'으로 생각할 수 있습니다.- 출처 블로그모달에 대한 더 자세한 내용과 모달과 팝업의 차이는 다음 블로그를 참고해주세요. 이번 글에서는 웹 서비스에서 많이 사용되는 모달 구현에 필요한 코드를 정리해보겠습니다. 🌵 전체 코드아래의 코드는 'Modal.tsx'라는 이름의 컴포넌트 파일로,사진에서 초록색 선으로 둘러싸인 부분과 같이 내용을 제외한 모달의 기본 틀을 제공합니다.import { ComponentPropsWithoutRef } from 'react';import closeIcon from '@icons/close_icon...

개발을 하다 보면 일반적인 세로 방향 스크롤이 아닌 아래의 그림처럼 가로 방향으로 넘어가는 스크롤이 필요한 경우가 있습니다.따라서 이번 글에서 가로 스크롤에 필요한 코드를 정리해보겠습니다. 🐝 전체 코드아래의 코드는 'useHorizontalScroll.ts'라는 이름의 커스텀 훅으로, 원하는 요소에 가로 스크롤을 적용합니다.import { useRef, useEffect, useCallback } from 'react';export const useHorizontalScroll = () => { const listWrapperRef = useRef(null); const handleWheel = useCallback((e: WheelEvent) => { const container = lis..

📬 서버 상태(Server State)서버 상태란 클라이언트가 아닌 서버나 그 밖의 외부 공간에 저장되어 있는 데이터로, 일반적으로 클라이언트가 요청을 보내 데이터를 사용합니다.서버 상태의 특징은 다음과 같습니다.서버에 저장되므로 클라이언트가 종료되어도 데이터가 사라지지 않습니다.보통 클라이언트에서 API 요청을 보내 데이터를 받아서 사용하며권한이 있는 클라이언트라면 누구나 서버 상태 데이터에 접근할 수 있습니다.네트워크 요청이 요구되므로 데이터에 접근하고 업데이트하는 데 시간이 걸릴 수 있습니다.서버 상태에는사용자와 관련된 정보(프로필, 권한의 정도)데이터베이스에 저장된 각종 데이터API를 통해 가져와야 하는 데이터비동기 데이터등이 존재합니다. 📬 클라이언트 상태(Client State)클라이언트 ..