React

웹 성능을 높일 수 있는 bundler plugins

웹 프론트엔드 성능 최적화는 사용자 경험과 직결되며, 로딩 속도가 느려지면 사용자 이탈률이 증가할 수 있다. 이를 해결하기 위해 웹 애플리케이션을 최적화하는 방법 중 하나는 번들러 플러그인들을 활용하는 것이다. 이번 글에서는 웹 프론트엔드 성능을 높일 수 있는 몇 가지 주요 번들러 플러그인들을 소개하고자 한다.1. Imagemin-pngquant 이미지 파일은 웹사이트 로딩 속도에 큰 영향을 미친다. 특히, PNG 파일은 고화질을 유지하는 만큼 용량이 커질 수 있다. 이를 줄이기 위해 사용하는 플러그인 중 하나가 imagemin-pngquant이다. 이 플러그인은 PNG 파일의 크기를 줄이면서도 이미지 품질을 최대한 유지해주는 역할을 한다.주요 기능:PNG 파일의 무손실 또는 저손실 압축이미지 품질을 사..

React Hook을 사용할 때 실수들 (2): useEffect

서론 React에서 컴포넌트의 lifecycle에 맞춰 동작하는 useEffect는 매우 자주 사용되는 훅이다. 하지만 이 훅을 잘못 사용하면 예기치 않은 동작이나 성능 문제를 일으킬 수 있다. 이 글에서는 useEffect를 사용할 때 흔히 저지르는 실수들과 그 해결 방법을 다룰 것이다.1. 객체는 참조한다 JavaScript에서 객체는 non-primitive 자료형이다. 즉, 객체의 내용이 같아도 두 객체는 서로 다른 참조 값을 가진다. 예를 들어 다음 코드를 보자.const obj1 = { a: 1 };const obj2 = { a: 1 };console.log(obj1 === obj2); // false 이 두 객체는 구조가 같지만 서로 다른 참조를 갖고 있으므로 === 비교에서는 false가 ..

React Hook을 사용할 때 실수들 (1): useState

서론 React에서 상태 관리를 위해 useState는 매우 자주 사용되는 훅이다. 하지만 이 훅들을 잘못 사용하면 예기치 않은 동작이나 성능 문제를 일으킬 수 있다. 이 글에서는 useState를 사용할 때 흔히 저지르는 실수들과 그 해결 방법을 다룰 것이다.1. setState는 즉시 실행되지 않는다 useState로 상태를 업데이트할 때 흔히 착각하는 부분은 setState가 즉시 상태를 업데이트한다고 생각하는 것이다. 하지만 React는 여러 상태 업데이트 요청을 모아서 한 번에 처리하는 특성을 갖고 있다. 아래 예제 코드를 보자.import React, { useState } from 'react';function Counter() { const [count, setCount] = useSta..

React Hook 이해하기 (4): useMemo, useCallback

React 애플리케이션에서 성능 최적화는 매우 중요하다. 컴포넌트가 복잡해지고 상태나 props의 변경이 빈번해질수록 불필요한 연산이 반복될 가능성이 높아진다. 이러한 문제를 해결하기 위한 도구로 React는 useMemo와 useCallback 훅을 제공한다. 이 두 훅은 주로 계산 비용이 많이 드는 연산을 memoization하여 불필요한 연산을 방지하는 데 사용된다. 특히, 클래스 컴포넌트에서 사용하던 shouldComponentUpdate 메서드를 대체할 수 있는 기능을 제공한다.useMemo: 복잡한 계산 결과를 memoization useMemo는 memoization을 통해 계산 비용이 많이 드는 연산을 최적화한다. memoization이란 동일한 계산이 반복될 때, 이전에 계산된 결과를 저..

React Hook 이해하기 (3): useRef

React 컴포넌트에서 상태를 기억하고 싶지만, 그 정보가 렌더링을 트리거하지 않기를 원할 때 사용하는 도구가 useRef다. useRef는 렌더링과 무관한 정보를 저장할 수 있는 ref 객체를 반환하며, 이 값은 ref.current를 통해 접근할 수 있다. ref는 상태처럼 정보를 저장할 수 있지만, 중요한 차이점은 ref는 변경되어도 리렌더링을 트리거하지 않는다는 점이다.useRef의 기본 개념 useRef는 상태와 달리, 값을 읽고 쓰는 데 있어서 자유롭다. ref 객체는 mutable하므로 값을 즉시 변경할 수 있으며, 이는 React에서 추적되지 않는다. 따라서 ref는 React가 렌더링 사이클을 관리하는 것과는 별개로 작동한다. 예를 들어, ref는 숫자, 문자열, 객체, 함수 등 어떤 값..

React Hook 이해하기 (2): useEffect

React 컴포넌트에서 상태를 관리하거나 이벤트 핸들러를 통해 사용자와 상호작용하는 경우, Side Effects가 발생하게 된다. 일반적으로 이벤트 핸들러는 사이드 이펙트를 포함한다. 그러나, 렌더링 자체로 인해 발생하는 사이드 이펙트를 처리해야 할 때는 useEffect 훅이 필요하다. 이 글에서는 useEffect의 개념, 동작 방식, 그리고 효과적인 사용 방법에 대해 설명하겠다.사이드 이펙트란? 사이드 이펙트란 프로그램의 상태를 변경하거나 외부 시스템과 상호작용하는 것을 의미한다. 예를 들어, 사용자가 버튼을 클릭하여 메시지를 전송하는 것은 이벤트에 의한 사이드 이펙트다. 반면, 컴포넌트가 렌더링될 때 외부 API로부터 데이터를 가져오는 작업은 렌더링으로 인해 발생하는 사이드 이펙트다. 이러한 렌..

React Hook 이해하기 (1): useState

React의 useState 훅은 컴포넌트 내부에서 상태를 관리할 수 있게 해주는 가장 기본적인 도구 중 하나다. 상태 관리는 동적인 UI를 구현하는 데 매우 중요하며, 상태의 변화에 따라 컴포넌트가 어떻게 업데이트되고 렌더링되는지 이해하는 것이 핵심이다. 이 글에서는 useState가 어떻게 동작하는지, 그 내부 구조와 상태 관리의 메커니즘을 살펴보고, 효율적인 상태 업데이트 방법에 대해 설명할 것이다.useState의 기본 개념useState 훅은 배열을 반환한다. 이 배열에는 두 가지 값이 포함되어 있다: 상태 값과 상태를 변경하는 함수(setter). 이 훅을 사용하면, 상태 값을 설정하고 나중에 업데이트할 수 있는 변수와 그 상태를 업데이트할 수 있는 함수를 얻게 된다. 하지만 중요한 내부적인 ..

React에서의 Event Handler

React에서 이벤트 핸들러는 DOM 이벤트를 처리하는 중요한 역할을 한다. 특히, e.stopPropagation()과 e.preventDefault()는 자주 사용되지만 서로 다른 목적으로 사용되는 함수다. 두 함수를 혼동하지 않도록 주의해야 한다.e.stopPropagation() e.stopPropagation()은 이벤트 버블링을 멈추기 위한 함수다. 버블링은 이벤트가 발생한 요소에서 상위 요소로 전달되는 과정을 의미한다. 예를 들어, 버튼 클릭 이벤트가 버튼을 감싸고 있는 div나 그 외 상위 요소로도 전달될 수 있다. 이때 e.stopPropagation()을 사용하면, 클릭 이벤트가 상위 요소로 전파되지 않게 막을 수 있다. 상위 태그에 부착된 이벤트 핸들러들이 실행되는 것을 방지하는 데 ..