React

🌳 훅(Hook)이란함수형 컴포넌트에서 리액트의 상태(state)와 생명주기 기능을 연동해주는 함수입니다.리액트 버전 16.8부터 새롭게 추가된 기능으로, 리액트의 클래스형 컴포넌트에서만 이용할 수 있던 기능을 함수형 컴포넌트에서도 사용할 있게 해줍니다.따라서 훅을 사용하면 기존의 클래스(class)를 작성하지 않고도 상태와 리액트의 다른 여러 기능들을 이용할 수 있습니다.훅은 함수형 컴포넌트에 맞게 만들어진 것이므로 함수형 컴포넌트에서만 사용이 가능하며, 'use'라는 키워드로 시작하는 특징을 가지고 있습니다. 리액트에는 여러 가지 훅들이 존재합니다. 이번 글에서는 대표적인 5가지 훅을 정리해보겠습니다.useStateuseEffectuseRefuseMemouseCallback 🌳 대표적인 훅 5가지..

🌵 문제 상황사용자가 특정 유저를 클릭하면 'https://es-cape-codeit.vercel.app/user/616'와 같이 마지막에 유저 아이디가 포함된 url로 이동합니다.해당 페이지는 유저의 프로필을 볼 수 있는 페이지입니다. 현재 유저 페이지의 url에서 유저 아이디를 가져와 if문으로 아이디의 유효성을 검사한 뒤, 유효하지 않다면 에러를 띄워 홈 화면으로 돌아가도록 구현하려고 하였습니다. 따라서 생각의 흐름과 동일하게 페이지로 이동했을 때 바로 아이디의 유효성을 검사하도록 if문을 가장 위에 두고,이후에 컴포넌트 렌더링에 필요한 코드들을 배치했습니다.import { useEffect } from 'react'import { useRouter } from 'next/router'export..

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

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