React
-
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'..
-
Stylelint를 이용해 css 정리하기 (feat. Styled-Components)React 2022. 11. 14. 15:15
(이 글은 MacOS, VSCode, postcss@8.4.19, postcss-jsx@0.36.4, stylelint@14.14.1, react@18.2.0을 기반으로 작성되었습니다.) Eslint는 이제 React로 개발을 진행할 때 혼자 하는 프로젝트에서는 물론이고 같이 협업하는 프로젝트에서는 거의 필수적으로 사용하는 라이브러리입니다. 주로 Eslint + Prettier을 이용해 자동으로 Eslint에서 설정한 룰과 Prettier에서 추가한 내용에 대하여 수정하는 식으로 진행하기에 더욱 사랑받고 있는 것 같습니다. 여기에서 style에 대해서는 이런 툴이 없을까 하는 생각에 발견한 것이 바로 Stylelint입니다. 이거다 하는 생각에 신나게 설정을 진행했을 때 당황할 수밖에 없었습니다. 제가 ..
-
React 디자인패턴React 2022. 10. 7. 15:30
1. Data 관점1. MVC제작시기 : 1979.12.10제작회사 : XEROX PARC제작 목적 : MVC의 기본 목적은 사용자의 멘털 모델과 컴퓨터에 존재하는 디지털 모델 간의 차이를 연결하는 것입니다.특징ModelViewController로 구성됩니다.Model : 순수 데이터 모음입니다.View : 시각적 요소로 Model에 데이터를 요청합니다.Controller : 사용자와의 상호작용을 담당합니다.2. MVVM제작시기 : 2005.10.08제작회사 : Microsoft제작 목적 : MVC를 현대 UI 개발 플랫폼에 맞게 제작됐습니다.특징ModelViewViewModel로 구성됩니다.Model, View : MVC에서와 동일합니다.ViewModel : Controller에서 좀 더 UI 측면으로..