🤔 커스텀 훅을 사용한 이유? 사실 처음부터 커스텀 훅을 사용해 만들 생각은 없었다. 처음 프로젝트를 만들 당시 카카오 맵 API를 활용한 중복된 코드가 많았고, 이를 불편하게 생각한 나는 리팩토링 과정에서 꼭 수정해야겠다고 다짐했다. 가장 불편했던 점은 지도와 인터랙션을 하기 위해서는 맵 객체를 생성해야 한다는 점이였다. 나는 프로젝트 요구사항을 만족시키기 위해 마커생성, 클릭이벤트, 클러스터러 기능 등 여러 가지를 수행해야 했다. 따라서 그럴 때마다 Map 객체를 만드는 과정을 반복해야 했다. 그래서 나는 Map객체를 공용으로 사용하는 인스턴스를 가진 커스텀 훅을 만들기로 했다. export default function useMap(containerRef: RefObject) { // 클릭한 곳 마..
🤔 useInfiniteQuery를 사용한 이유 무한 스크롤을 적용시키는 방법은 여러가지가 있다. 하지만 구조는 비슷할 것이다. Intersection-observer를 이용해 특정 영역을 감시하고, 감시된 영역이 보이면 데이터 요청을 보내는 방식이 대부분일 것이다. 이를 구현하는 방식의 차이가 있다고 생각한다. useState를 사용해서 observer가 발동되면 page를 1씩 늘려주는 방법, 또는 useInfiniteQuery를 사용해 자동으로 page를 늘려주는 방식이 있다. 하지만 내가 useInfiniteQuery를 사용한 이유는 우선 useState는 간단한 데이터 구조와 UI 상태 변경을 위해 사용되고, 이경우 페이지 번호를 state로 관리하고 무한 스크롤 로직에서 페이지 번호를 직접 증..
🤔 React-query 사용 이유 오늘 내가 해볼 것은 DB에 있는 장바구니 수량을 실시간으로 반영해주는 아이콘을 만들 것이다. 원래 같았으면 장바구니 버튼 클릭 시 axios 요청을 통해 수량을 setState 함수에 넣고 state값을 렌더링을 시켜줬을 것이다. 하지만 나는 서버 상태를 비동기적으로 처리 해주면서 server state를 따로 관리를 해주는 react-query를 배웠으니 이를 활용해서 구현 할 것이다. 사용 이유 1. 서버 상태와 데이터 동기화 2. server state와 client state 구분 목적 1️⃣ useQuery를 이용한 커스텀 훅 만들기 우선 고려해야 할 점이 있다. 장바구니 수량은 "장바구니 담기" 버튼을 클릭했을 때만 증가한다. 이 말은 쿼리를 계속 관찰하고..
1. 개요 지금까지 나는 Vanilla JS를 사용해서 프로젝트를 했기에 페이지 전환시 약간의 로딩이 걸리는 것은 당연하다고 생각했다. 하지만 리액트는 달랐다. Router를 사용해서 여러개의 페이지를 마치 한개의 페이지 처럼 로딩없이 빠르게 이동이 가능하다는 것을 알았다. 이것이 바로 SPA(Single Page Application)의 가장 큰 장점이다. 2. 사용 방법 2-1 이동할 페이지를 만든다. 나는 한개의 폴더를 만들고 그 안에 사이트에 필요한 페이지들을 모두 넣어 놨다. const New = () => { return ( New 이곳은 일기를 작성하는 곳입니다. ); }; export default New; 각각의 페이지에는 페이지가 이동됐을 시 나오는 컴포넌트를 생성해준다. 2-2 Lin..
1. 개요 이전 글에서 useMemo에 대해 배워봤다. useMemo는 hook이기 때문에 오직 함수형 컴포넌트 안에서만 사용이 가능하다. 하지만 React.memo는 HOC(Higher-order Components)이기 때문에 클래스형 컴포넌트, 함수형 컴포넌트 모두 사용이 가능하다. 2. 사용 방법 const MyComponent = React.memo((props) => { return (/*컴포넌트 렌더링 코드*/)} ); 1. 기존의 함수를 React.memo로 감싸준다. 만약 컴포넌트가 같은 props를 받을 때 같은 결과를 렌더링한다면 React.memo를 사용하여 불필요한 컴포넌트 렌더링을 방지할 수 있다. 즉, 컴포넌트에 같은 props가 들어온다면 리액트는 컴포넌트 렌더링 과정을 스킵..
1. 개요 컴포넌트를 사용하다보면 불필요하게 계속 리렌더링 되는 순간들이 있다. 이러한 것들을 해결해 주는 것이 useMemo다. useMemo는 리액트에서 컴포넌트의 성능을 최적화 하는데 사용되는 훅이다. useMemo에서 memo는 memoization을 뜻하는데 이는 그대로 해석하면 ‘메모리에 넣기’라는 의미이며 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. 쉽게 말해 동일한 값을 반환하는 함수를 반복적으로 호출해야한다면 처음 값을 계산할 때 해당 값을 메모리에 저장해 필요할 때마다 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 것이다. 2. 사용 방법 import { us..