React
-
React Portal에 대해 알아보기 (Feat. Next.js 예시)React 2024. 11. 16. 15:57
React를 사용하다 보면 컴포넌트 트리 구조 내에서 DOM 구조와 시각적인 표현이 일치하지 않는 상황을 마주할 때가 있습니다.이런 경우에 React Portal은 강력한 도구로 활용될 수 있습니다.이번 글에서는 React Portal의 작동 원리부터 실제로 어떻게 활용할 수 있는지 살펴보겠습니다.1. React Portal이란 무엇인가?React Portal은 React 16부터 도입된 기능으로, 현재의 컴포넌트 계층 구조 밖의 DOM 노드로 자식을 렌더링 할 수 있게 해 줍니다.일반적으로 React 컴포넌트는 부모 컴포넌트의 DOM 노드 내에 렌더링 되지만, Portal을 사용하면 컴포넌트를 DOM 트리의 다른 위치에 렌더링 할 수 있으면서, 그리하여 논리적으로는 기존의 컴포넌트 트리 구조를 유지할 ..
-
React Floating Button 만들기 (with Intersection Observer)React 2024. 11. 9. 21:13
플로팅 버튼(Floation Button)은 사용자 경험을 높이기 위해 자주 사용되는 요소 중 하나입니다.Intersection Observer를 활용해 Footer 영역에서 멈추는 플로팅 버튼을 구현해 보겠습니다.1. 인피니티 스크롤 구현인피니티 스크롤은 사용자가 스크롤을 내릴 때마다 새로운 콘텐츠를 불러오는 기능입니다.간단한 예제로 구현해 보겠습니다.// App.jsimport React, { useState, useEffect } from 'react';function App() { const [items, setItems] = useState(Array.from({ length: 20 }, (_, i) => i)); const loadMore = () => { setItems((prevI..
-
Compound Component 패턴 (feat. React, Next.js)React 2024. 9. 21. 13:55
Compound components는 React에서 더 표현력 있고 사용자 정의가 가능한 컴포넌트 API를 만들 수 있게 해주는 강력하고 유연한 패턴입니다.이 패턴은 특히 여러 관련 부분을 가진 복잡한 UI 컴포넌트를 구축할 때 유용합니다.이 개념에 대해 자세히 알아보고 Next.js에서 어떻게 구현할 수 있는지 살펴보겠습니다.Compound Components란 무엇인가?Compound components는 함께 작동하여 일관된 기능 단위를 형성하는 컴포넌트 그룹입니다.주요 아이디어는 공유 상태와 동작을 관리하는 부모 컴포넌트를 만들고, 자식 컴포넌트가 특정 부분의 렌더링을 처리하도록 하는 것입니다.Compound components 사용 시 주요 이점향상된 유연성과 사용자 정의 가능성관심사의 더 나은..
-
react-virtuoso를 사용한 렌더링 최적화React 2024. 3. 30. 20:04
React-Virtuoso란? React-Virtuoso는 React 애플리케이션을 위한 최첨단 가상 리스트 라이브러리입니다. 가상 스크롤링을 사용하여 대규모 데이터 세트를 효율적으로 렌더링 하고, 사용자 경험을 향상하며, 애플리케이션의 성능을 최적화합니다. React-Virtuoso는 동적 높이, 그룹화, 맨 위로 스크롤, 무한 로딩 등 고급 기능을 지원하여 개발자가 복잡한 목록 및 테이블을 쉽게 구현할 수 있게 해 줍니다. React-Virtuoso와 React-Window 및 React-Virtualized 비교 장점 동적 높이 지원: React-Virtuoso는 항목의 높이가 동적으로 변할 수 있음을 자동으로 감지하고 최적화합니다. 이는 React-Window와 비교했을 때 두드러진 차이점이며, ..
-
Cypress vs Playwright E2E 테스트 프레임워크 비교React 2024. 2. 13. 14:07
웹 애플리케이션 테스팅은 개발 과정에서 중요한 부분입니다. Cypress와 Playwright는 모두 자동화된 브라우저 테스팅을 위한 현대적인 프레임워크입니다. 이 글에서는 Cypress와 Playwright를 비교하고, 어느 상황에서 각각을 사용하는 것이 더 적합한지 비교해 보겠습니다. Cypress Cypress는 개발자와 QA 엔지니어 사이에서 인기 있는 엔드투엔드 테스팅 프레임워크입니다. 사용의 용이성과 설정의 단순함으로 많은 사랑을 받고 있습니다. 장점 쉬운 설치 및 설정: Cypress는 설정이 매우 간단하며, 사용하기 쉽습니다. 실시간 리로딩: 테스트 코드를 변경하면 자동으로 테스트가 재실행됩니다. 디버깅 용이: 실패한 테스트에 대해 자세한 오류 로그와 스크린샷, 비디오 녹화 기능을 제공합니..
-
고급 React Hooks 사용을 위한 팁과 요령React 2024. 2. 5. 13:36
React Hooks는 단순히 상태와 생명주기 메서드를 함수형 컴포넌트로 가져오는 것 이상의 강력한 기능을 제공합니다. 여기서는 지난 편에 이어 useCallback, useMemo, useReducer를 더 효과적으로 사용하기 위한 실용적인 예제와 덜 알려진 방법들을 공유하고자 합니다. 1. useCallback과 useMemo, useReducer를 지혜롭게 사용하기 1.1 useCallback 예제: 이벤트 핸들러 최적화 import React, { useState, useCallback } from 'react'; function TodoList({ todos, toggleTodo }) { // useCallback을 사용하여 불필요한 렌더링 방지 const toggle = useCallback(..
-
useState와 useEffect를 넘어선 고급 React HooksReact 2024. 1. 29. 14:11
React의 Hooks 도입은 함수형 컴포넌트 개발에 혁신을 가져왔으며, 상태 관리와 부수 효과(side effects)를 다루는 더 강력하고 유연한 방법을 제공합니다. useState와 useEffect는 널리 사용되고 있지만, React 애플리케이션을 크게 향상할 수 있는 다양한 고급 hooks가 더 있습니다. 1. useCallback useCallback은 메모이제이션된(memoized) 콜백 함수를 반환하는 훅입니다. 특히 복잡한 로직이 있는 컴포넌트나 함수를 props로 받는 컴포넌트에서 불필요한 렌더링을 방지하는 데 매우 유용합니다. 큰 리스트나 테이블의 성능 최적화. 자식 컴포넌트의 불필요한 렌더링 방지. const memoizedCallback = useCallback( () => { /..
-
React useEffect vs useLayoutEffect 차이점 알아보기React 2022. 12. 15. 16:29
React를 사용하며 아마 가장 많이 사용하는 Hook을 말하라면 무조건 순위권 안에 들 Hook은 useEffect일 것입니다. 하지만 아래의 Flow 그림에서 보면 useEffect 이외에 useLayoutEffect라는 hook이 있다는 것을 알 수 있습니다. 둘의 차이는 간단하게 설명 가능합니다. Dom이 화면을 그린 뒤 호출되는 것이 useEffect 화면을 그리기 전에 호출되는 것이 useLayoutEffect입니다. 이렇게 말하면 와닿지 않을 수 있을 수 있겠지만 React내에서의 깜빡임 문제를 해소하려고 검색할 경우 가장 많이 나오는 것이 useLayoutEffect입니다. 아래의 코드를 살펴봅시다. import React, { useEffect, useState } from 'react'..