최근에 Next.js를 계속 공부하고 있는데 그 중 가장 헷갈렸던 부분 중 하나가 'use client' 지시어와 React Hooks의 관계였다.Next.js 13 버전부터 도입된 App Router와 함께 서버 컴포넌트가 기본값이 되면서, React의 useState, useEffect와 같은 훅을 사용하기 위해서는 'use client' 지시어가 필요하게 되었다.이것이 정확히 무엇을 의미하는지, 그리고 이로 인해 SSR(Server-Side Rendering)과 어떤 관계가 있는지 깊이 이해하고 싶어 공부를 시작했고, 이 글에서는 Next.js에서 React Hooks를 사용할 때 'use client' 지시어가 필요한 이유와 이것이 렌더링 방식에 미치는 영향에 대해 자세히 살펴보려 한다.먼저 Ne..

Naver Maps API? 그런게 있어?Naver Maps API는 네이버에서 제공하는 지도 서비스 API이다.필자가 처음 지도 서비스를 구현하려고 할 때 Google Maps API를 고려했지만, 한국 지도 서비스의 특성상 Naver Maps API가 더 적합하다고 판단했다.(Naver Maps API는 한글 도로명 주소와 건물명을 더 정확하게 처리할 뿐만 아니라, 국내 위치 기반 서비스에 최적화되어 있다!!) 사용하려면 뭘해야 될까? 🤔먼저 Naver Cloud Platform에서 애플리케이션을 등록하고 Client ID를 발급받아야 한다.이 과정에서 서비스 도메인을 등록하는데, 개발 환경에서는 localhost도 등록할 수 있다.(필자는 React에서 사용하는 부분을 정리하고자 하니 Client..

필자는 최근에 리액트로 프로젝트를 진행하면서 실시간 검색 기능을 구현하게 되었다.처음에는 단순히 onChange 이벤트에 검색 함수를 연결해서 사용했는데, 타이핑할 때마다 API 요청이 발생하는 문제를 발견했다.이를 해결하기 위해 디바운싱(Debouncing)이라는 기술을 알아냈고 적용했는데 정말 이런 실시간 검색 기능에 유용할 것 같아 정리해보기로 했다!디바운싱이란?디바운싱은 연속적으로 발생하는 이벤트를 그룹화하여 마지막 이벤트만 처리하는 프로그래밍 기법이다.예를 들어 사용자가 "hello"라는 단어를 입력할 때, 각 알파벳마다 API를 호출하는 대신 타이핑이 완전히 끝난 후에만 한 번 호출하도록 제어할 수 있다.검색 기능에서의 문제점은 무엇일까?일반적인 검색 구현은 다음과 같이 작성된다.const S..

useRef란?useRef는 React의 Hooks 중 하나로, 컴포넌트의 생명주기 동안 지속적으로 유지되는 값을 저장하는 용도로 사용된다.마치 우리가 변수를 선언하고 값을 저장하는 것처럼, useRef도 값을 저장하지만 몇 가지 특별한 특징을 가지고 있다!useRef의 기본 개념useRef의 가장 기본적인 형태를 살펴보자.import { useRef } from 'react';function MyComponent() { const myRef = useRef(null); return Hello, World!;}이 코드에서 useRef는 초기값으로 null을 받아 생성된다.useRef가 반환하는 객체는 .current라는 프로퍼티를 가지고 있으며,이 프로퍼티를 통해 실제 값에 접근하고 수정할 수 있..

리액트 이벤트 핸들링이란?리액트에서 이벤트 핸들링은 사용자의 상호작용을 감지하고 처리하는 방법이다.웹 애플리케이션에서 버튼 클릭, 폼 제출, 키보드 입력 등 다양한 사용자 액션에 반응하기 위해 필수적인 개념이라고 할 수 있다.(일반 JavaScript의 이벤트 핸들링과 비슷하지만, 리액트만의 특별한 문법과 규칙이 있다. => 아래에 정리해보겠다.)이벤트 핸들러의 기본 문법이벤트를 사용할 때 주의 사항/기본 문법으로는 네 가지로 추릴 수 있다.이벤트 이름은 camelCase로 작성해야한다.예를 들어 HTML의 onclick은 리액트에서는 onClick으로 작성해야한다.HTML에서는 이벤트에 실행할 자바스크립트 코드를 문자열로 전달하지만, 리액트에서는 함수 형태의 값을 전달한다.DOM 요소에만 이벤트를 설정..