전체 글54 렌더링 성능 향상 위해 어떻게 해야 하는가 웹 애플리케이션의 렌더링 성능을 향상시키기 위해서는 여러 전략과 기술을 적절히 활용해야 한다 React와 같은 모던 웹 프레임워크를 사용하는 경우, 특히 주의 깊게 고려해야 할 몇 가지 방법들이 있다 1. 불필요한 렌더링 방지 shouldComponentUpdate와 React.PureComponent 클래스 컴포넌트에서 shouldComponentUpdate 메소드를 오버라이딩하거나 React.PureComponent를 상속받음으로써 불필요한 렌더링을 줄일 수 있다 이들은 컴포넌트의 props나 state가 실제로 변경되었을 때만 리렌더링을 허용한다 React.memo 함수형 컴포넌트에서는 React.memo를 활용하여 컴포넌트의 출력이 동일한 props에 대해 동일하다는 것을 보장함으로써 불필요한 렌.. 2024. 3. 6. 메모이제이션 메모이제이션(Memoization)은 컴퓨터 프로그래밍에서 함수의 호출 결과를 캐시하고, 동일한 입력값으로 함수가 다시 호출될 때 캐시된 결과를 반환하여 연산의 반복을 줄이는 최적화 기술이다 이 방식은 특히 계산 비용이 높거나 반복 호출이 잦은 함수에 대해 성능을 크게 향상시킬 수 있다 메모이제이션은 순수 함수(pure function)에 가장 적합한 기법이다 순수 함수는 동일한 인자에 대해 항상 같은 결과를 반환하며, 외부 상태에 의존하지 않고, 부작용(side-effect)을 일으키지 않는 함수다 작동 원리 메모이제이션을 사용할 때, 함수는 첫 호출 시 그 결과를 내부 캐시(보통은 자료구조, 예를 들어 해시 테이블)에 저장한다 이후 동일한 인자로 함수가 호출되면, 함수는 새로운 계산을 수행하는 대신 .. 2024. 3. 5. useMemo와 useCallback React에서 useMemo와 useCallback은 성능 최적화를 위해 사용되는 훅(Hooks)이다 둘 다 계산 비용이 많이 드는 연산의 결과를 재사용함으로써 불필요한 연산을 방지할 수 있도록 도와준다 그러나 사용 목적과 적용 방식에서 차이가 있다 useMemo useMemo는 메모이제이션된 값을 반환하는 훅이다 즉, 복잡한 함수의 연산 결과값을 "기억"하고, 의존성 배열(dependency array)에 있는 값들이 변경되지 않았다면 이전 연산 결과를 재사용한다 이를 통해 불필요한 연산을 방지하고 성능을 최적화할 수 있다 import React, { useMemo } from 'react'; function expensiveCalculation(num) { console.log('Calculating.. 2024. 3. 5. useState 사용하는 이유 React에서 state를 직접 사용하지 않고 useState 훅을 사용하는 이유는, React의 함수형 컴포넌트에서 상태 관리 기능을 사용할 수 있게 하기 위해서다 이는 React 16.8 버전에서 도입된 Hooks의 일부로, 클래스 컴포넌트 없이도 상태와 React의 다른 기능들을 함수형 컴포넌트에서 사용할 수 있게 해준다 useState의 도입 배경 이전에는 React의 상태 관리와 생명주기 기능을 사용하기 위해서는 클래스 컴포넌트를 사용해야 했다 그러나 클래스 컴포넌트는 여러 단점을 가지고 있었다: 복잡성: 클래스 컴포넌트는 this 키워드, 바인딩, 생명주기 메서드 등을 다루어야 하기 때문에, 새로운 React 개발자에게 학습 곡선이 높았다 재사용성: 클래스 컴포넌트에서 상태 로직을 재사용하기 .. 2024. 3. 5. 리액트에서 JSX 문법 어떻게 사용되는가 JSX(JavaScript XML)는 JavaScript를 확장한 문법으로, React에서 UI를 표현하기 위해 사용된다 JSX는 HTML과 비슷하게 생겼지만, 실제로는 JavaScript다 React의 createElement 함수 호출로 변환되며, 이를 통해 React 엘리먼트를 생성한다 JSX를 사용하면 UI 구조를 명확하고 직관적으로 작성할 수 있으며, JavaScript의 표현력을 그대로 활용할 수 있다 JSX의 주요 특징 태그 사용: HTML과 유사한 태그를 사용하여 컴포넌트를 렌더링할 수 있다 태그는 대소문자를 구분하며, React 컴포넌트는 대문자로 시작한다 JavaScript 표현식: 중괄호 {} 안에 JavaScript 표현식을 넣어 JSX 안에서 변수 값을 삽입하거나, 조건부 렌더링,.. 2024. 3. 5. 생명 주기 메서드 React 컴포넌트의 생명주기 메서드는 컴포넌트의 생성부터 소멸까지 여러 단계에서 호출되는 일련의 메서드다 이 메서드들을 이해하고 적절히 사용하는 것은 React 애플리케이션의 성능 최적화와 자원 관리에 매우 중요하다 React 16.3 이후에는 생명주기 메서드가 크게 마운팅(Mounting), 업데이트(Updating), 언마운팅(Unmounting)의 세 단계로 구분되며, 각 단계별로 호출되는 메서드들이 있다 추가적으로, 오류 경계(Error Boundary) 단계의 메서드도 있다 마운팅 (Mounting) 마운팅은 컴포넌트가 DOM에 처음 삽입되는 단계다 다음 메서드들이 이 순서대로 호출된다 constructor() 컴포넌트의 생성자 함수 초기 state를 설정 static getDerivedSta.. 2024. 3. 5. 이벤트 버블링과 캡쳐링, 이벤트 위임 웹 개발에서 이벤트 처리는 사용자 인터랙션을 다루는 핵심적인 부분이다 이벤트 버블링(Event Bubbling), 이벤트 캡쳐링(Event Capturing), 그리고 이벤트 위임(Event Delegation)은 이벤트를 효율적으로 처리하는 데 사용되는 세 가지 중요한 개념이다 이벤트 버블링 (Event Bubbling) 이벤트 버블링은 특정 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 부모 요소로 전파되는 현상을 말한다 예를 들어, HTML 문서에서 버튼을 클릭하는 이벤트가 발생하면, 이 이벤트는 먼저 해당 버튼에서 발생하고, 그 후에는 버튼을 포함하고 있는 부모 요소로, 그리고 그 부모의 부모 요소로 계속해서 전파된다 이 과정은 최상위 요소(document)에 도달할 때까지 계속된다 이벤트 캡쳐.. 2024. 3. 5. shouldComponentUpdate Pure Component React에서 PureComponent는 Component의 서브클래스로, 컴포넌트의 props와 state가 변경될 때 리렌더링을 결정하는 방식에 있어 Component와 다르다 PureComponent는 shouldComponentUpdate 생명주기 메소드를 자동으로 구현하고 있으며, 얕은 비교(shallow comparison)를 사용하여 props와 state의 변경을 검사한다 이는 컴포넌트의 성능 최적화를 돕는다 얕은 비교는 props와 state의 최상위 수준의 값만 비교하여, 이전 값과 새로운 값이 같은지 여부를 판단한다 객체나 배열과 같은 복잡한 구조에서는 내부 값이 변경되어도 최상위 참조가 같으면 변경사항을 감지하지 못할 수 있다 따라서, PureCompone.. 2024. 3. 5. pure component Pure Component는 React에서 제공하는 컴포넌트의 한 종류로, 컴포넌트의 리렌더링 성능을 향상시키기 위해 사용된다 클래스 컴포넌트와 함수형 컴포넌트 모두에 해당하는 개념으로, 클래스 컴포넌트에서는 React.PureComponent를 상속받아 사용하고, 함수형 컴포넌트에서는 React.memo를 사용하여 비슷한 효과를 낼 수 있다 클래스 컴포넌트에서의 Pure Component React.PureComponent는 React.Component와 매우 비슷하지만, shouldComponentUpdate() 메소드를 자동으로 구현하여, props와 state가 변경되었을 때만 컴포넌트가 리렌더링되도록 한다 이 구현은 얕은 비교(shallow comparison)를 사용하여 현재 props와 st.. 2024. 3. 5. 이전 1 2 3 4 5 6 다음
