useMemo와 useCallback, 언제 써야 할까?리액트를 쓰다 보면 언젠가 반드시 마주치는 질문이 있다. "이 값, useMemo로 감싸야 하나?", "이 함수, useCallback 안 쓰면 안 되나?" 둘 다 "메모이제이션(memoization)"이라는 같은 개념을 사용하지만, 감싸는 대상이 다르고 쓰는 이유도 조금씩 다르다.이번 글에서는 두 훅을 언제 쓰고, 언제 안 써도 되는지를 실제 예시와 함께 정리해보았다. 먼저, 왜 이런 훅이 필요할까리액트 컴포넌트는 state나 props가 바뀌면 다시 렌더링이 된다. 문제는 컴포넌트 함수가 다시 실행될 때마다, 그 안에서 만든 배열, 객체, 함수도 매번 새로 생성된다는 점이다.function Parent() { const [count, setC..

1. 개요리액트 프로젝트에서 useState내 첫 렌더링시에만 작용되도록 화살표함수를 사용했다. 이러한 구조를 익히며 리액트에서 사용되어지는 화살표 함수 역할을 정의해보고자 한다. 일단 JS에서 함수는 객체다. React에서는 컴포넌트 안에 함수가 선언되어 있으면 컴포넌트가 리렌더링 될 때 함수들을 재생성하게 된다. 1️⃣ 리액트에서 화살표 함수(Arrow Function)의 핵심 역할화살표 함수는 단순히 “짧은 함수 문법”이 아니다. React에서는 의미가 명확하게 다르다. ✔️ 화살표 함수의 정의화살표 함수는 “언제 실행할지”가 아니라“어떻게 실행할지(지연·위임·안전한 계산)”를 표현하는 문법이다. 그리고 React가 그 함수를 ‘어떻게 쓰느냐’에 따라 의미가 달라진다. 1-1. ..

개요진행중이던 프로젝트 중간에 투여되어 작업을 진행했던 7개월동안지속적으로 궁금했던 프로젝트내(vue) axios 관련 통신 구조를 파헤쳐보기로 했다. (공부도 할겸) 목차1. axios1-1. axios 전역설정1-2. axios instance 1-3. axios interceptors 1. axios axios란 무엇인가? 간단히 설명하고 넘어가자면,axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이며 백엔드와 프론트엔드의 통신을 간결하고 쉽게 진행하기 위해 사용한다. axios의 특징 가운데 이 포스팅에서 우리가 눈여겨 봐야할 것은 아래와 같이 3가지이다. 1. 자동으로 JSON데이터 형식으로 변환2. data 속성을 사용 3. data는..

1. 개요next.js 프로젝트를 앞두고 react 상태관리를 시범삼아 해보기로 했다.이전엔 useState 및 React Context API 를 통한 상태관리를 경험했다면 프로젝트 규모에 따라 달라지는 상태관리를 파악해 라이브러리를 사용해보기로 했다. 2. Zustand 라이브러리 적용할 프로젝트 next.js의 버전이 15.2.4 라는 점과 상태와 액션을 통합해 React Context나 Provider없이도 전역상태를 사용할 수 있다는 점, 간결한 코드 패턴과 단순하고 관리가 용이하다는 점에서 Zustand 를 사용하기로 했다.선택하기에 가장 큰 장점이라면 Redux와 같이 복잡한 코드 구조보다 코드의 가독성이 좋고 상태흐름이 명확하게 파악된다는 점이 컸다. 3. Zustand 시작하기 3..

1. 개요- 네이버 지도를 활용한 맵 팝업을 구성 - 네이버 정책상 네이버 지도 url에 위도, 경도 값을 넣어도 출발,도착 경로 설정이 불가- 개선방향으로 데스크톱 웹에서는 url에 장소명을 넣어 장소를 표출하고 출발, 도착 지점을 사용자가 지정할 수 있도록 구성 모바일에서는 네이버 지도 어플이 있는 경우 어플로 이동하고, 없는 경우 웹페이지 자체에서 네이버 지도 영역으로 이동해 데스크톱 웹처럼 이용할 수 있도록 구성 2. 요구되어지는 사항- 모바일에서 안드로이드 또는 IOS 기기의 네이버 지도 어플이 없는 경우 열린 웹페이지내에서 페이지 이동이 가능하도록하는 fallback 기능이 필요** 여기서 fallback_ 이란 개발에서 자주 쓰는 개념으로 쉽게 말하면 **주요 동작이 실패했을 때 대..

주요 차이점✅ 콜백함수(callback function)란?- 함수의 매개변수를 통해 다른 함수의 내부로 전달되어지는 함수이다.- 중첩함수가 외부함수를 돕는 헬퍼 함수의 역할을 하는 것처럼 콜백함수도 고차함수에 전달되어 헬퍼함수의 역할을 한다.단, 중첩함수는 고정되어있어 교체하기 곤란하지만 콜백함수는 함수 외부에서 고차함수 내부로 주입하기 때문에 자유롭게 교체할 수 있다는 장점이 있다. 즉, 고차함수는 콜백함수를 자신의 일부분으로 합성한다.**고차함수(higer-order-function)란? 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차함수라고 한다. ✅ 콜백함수의 전개- 고차함수는 매개 변수를 통해 전달받은 콜백함수의 호출 시점을 결정해서 호출한다.- 다시 말해, 콜백함수는..