Scroll
-
Next.js는 React 기반 웹 애플리케이션 프레임워크로, 페이지 전환 및 라우팅 기능을 강화하여 사용자 경험을 향상시킵니다. Next.js 14 버전에서는 Link 컴포넌트에 여러 가지 새로운 기능과 개선 사항이 도입되었습니다. 이 블로그 게시글에서는 Link 컴포넌트의 주요 기능과 속성을 자세히 살펴보고, 실제 예시를 통해 각 속성의 작동 방식을 이해할 것입니다. 1. Link 컴포넌트 기본 개요 Link 컴포넌트는 Next.js에서 페이지 간 이동을 위한 핵심 요소입니다. 기본적으로 HTML 태그와 유사하게 작동하지만, 클라이언트 측 라우팅, 프리페칭, 스크롤링 제어 등 Next.js 특화 기능을 제공합니다. 1.1. 기본 사용법 Link 컴포넌트는 다음과 같이 간단하게 사용할 수 있습니다: i..
[Next.js] 14 버전에서 Link 컴포넌트 심층 분석!Next.js는 React 기반 웹 애플리케이션 프레임워크로, 페이지 전환 및 라우팅 기능을 강화하여 사용자 경험을 향상시킵니다. Next.js 14 버전에서는 Link 컴포넌트에 여러 가지 새로운 기능과 개선 사항이 도입되었습니다. 이 블로그 게시글에서는 Link 컴포넌트의 주요 기능과 속성을 자세히 살펴보고, 실제 예시를 통해 각 속성의 작동 방식을 이해할 것입니다. 1. Link 컴포넌트 기본 개요 Link 컴포넌트는 Next.js에서 페이지 간 이동을 위한 핵심 요소입니다. 기본적으로 HTML 태그와 유사하게 작동하지만, 클라이언트 측 라우팅, 프리페칭, 스크롤링 제어 등 Next.js 특화 기능을 제공합니다. 1.1. 기본 사용법 Link 컴포넌트는 다음과 같이 간단하게 사용할 수 있습니다: i..
2024.03.09 -
React Intersection Observer는 웹 개발자들이 요소의 가시성과 화면 내 위치에 대한 정보를 얻을 수 있는 강력한 라이브러리입니다. 이 글에서는 React Intersection Observer의 사용법과 기능에 대해 자세히 알아보겠습니다. Observer API란? Observer API는 웹 애플리케이션에서 시스템 이벤트 및 상태 변화를 감지하는 데 사용되는 JavaScript API입니다. 이 API는 브라우저에서 실행되는 애플리케이션에서 사용자의 시스템 환경과 관련된 정보를 제공합니다. Observer API는 사용자의 네트워크 연결 상태, 배터리 수준, 장치 방향, 화면 밝기 등과 같은 정보를 확인할 수 있습니다. 이를 통해 웹 개발자는 사용자의 디바이스 환경에 대한 인사이트를..
[React Intersection Observer] Lazy Loading, 무한스크롤React Intersection Observer는 웹 개발자들이 요소의 가시성과 화면 내 위치에 대한 정보를 얻을 수 있는 강력한 라이브러리입니다. 이 글에서는 React Intersection Observer의 사용법과 기능에 대해 자세히 알아보겠습니다. Observer API란? Observer API는 웹 애플리케이션에서 시스템 이벤트 및 상태 변화를 감지하는 데 사용되는 JavaScript API입니다. 이 API는 브라우저에서 실행되는 애플리케이션에서 사용자의 시스템 환경과 관련된 정보를 제공합니다. Observer API는 사용자의 네트워크 연결 상태, 배터리 수준, 장치 방향, 화면 밝기 등과 같은 정보를 확인할 수 있습니다. 이를 통해 웹 개발자는 사용자의 디바이스 환경에 대한 인사이트를..
2023.07.09 -
useRef란? useRef는 구성 요소 렌더링 간에 지속되는 변경 가능한 참조를 만들 수 있는 React의 후크입니다. 즉, 속성이나 상태의 변경으로 인해 구성 요소가 다시 렌더링되더라도 동일한 참조를 사용하여 값이나 DOM 요소에 액세스하고 업데이트할 수 있습니다. useRef는 불필요한 재렌더링을 방지하여 성능을 최적화할 뿐만 아니라 구성 요소 내의 여러 함수 또는 후크에서 액세스해야 하는 DOM 요소에 대한 값 또는 참조를 저장하는 데 유용할 수 있습니다. 공홈 참조 https://ko.legacy.reactjs.org/docs/hooks-reference.html#useref scrollIntoView() scrollIntoView()는 요소를 브라우저 창의 보이는 영역으로 부드럽게 스크롤할 수..
리액트 (use)Ref 스크롤 이벤트useRef란? useRef는 구성 요소 렌더링 간에 지속되는 변경 가능한 참조를 만들 수 있는 React의 후크입니다. 즉, 속성이나 상태의 변경으로 인해 구성 요소가 다시 렌더링되더라도 동일한 참조를 사용하여 값이나 DOM 요소에 액세스하고 업데이트할 수 있습니다. useRef는 불필요한 재렌더링을 방지하여 성능을 최적화할 뿐만 아니라 구성 요소 내의 여러 함수 또는 후크에서 액세스해야 하는 DOM 요소에 대한 값 또는 참조를 저장하는 데 유용할 수 있습니다. 공홈 참조 https://ko.legacy.reactjs.org/docs/hooks-reference.html#useref scrollIntoView() scrollIntoView()는 요소를 브라우저 창의 보이는 영역으로 부드럽게 스크롤할 수..
2023.04.23