분류 전체보기54 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. props와 state 차이 React에서 props와 state는 컴포넌트의 데이터를 관리하는 두 가지 중요한 개념이다 각각은 다른 목적과 사용 방법을 가지고 있으며, 컴포넌트의 동작과 렌더링 방식을 결정하는 데 핵심적인 역할을 한다 Props 정의: Props(속성)는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터다 Props는 컴포넌트를 구성하고 재사용하는 데 필요한 매개변수와 같다 불변성: Props는 읽기 전용 컴포넌트 내부에서 props의 값을 변경할 수 없다 자식 컴포넌트는 전달받은 props를 그대로 사용하거나, 필요에 따라 props를 기반으로 다른 데이터를 생성할 수는 있지만, 직접 수정할 수는 없다 목적: 다른 컴포넌트와의 상호작용을 통해 컴포넌트에게 값을 전달하고, 컴포넌트를 재사용할 수 있게 한다 Pro.. 2024. 3. 5. 클래스형 컴포넌트와 함수형 컴포넌트 차이 React에서 컴포넌트를 생성하는 데는 주로 두 가지 방식이 있다 클래스형 컴포넌트(Class Components)와 함수형 컴포넌트(Function Components) 각각의 방식은 컴포넌트를 정의하고 사용하는 방법에서 차이를 보인다 React의 초기 버전에서는 주로 클래스형 컴포넌트가 사용되었지만, React 16.8부터 도입된 Hooks의 등장으로 함수형 컴포넌트의 사용이 늘어나고 있다 클래스형 컴포넌트 클래스형 컴포넌트는 ES6의 클래스를 사용하여 정의된다 이 방식은 this 키워드를 사용하여 컴포넌트의 상태(state)와 생명주기 메소드(lifecycle methods)를 다룰 수 있다 장점: 생명주기 메소드를 사용할 수 있어, 컴포넌트가 생성되고 업데이트되고 제거되는 시점에 특정 작업을 실행.. 2024. 3. 5. 리액트 Virtual DOM React의 Virtual DOM은 현대 웹 애플리케이션의 성능을 최적화하는 데 중요한 역할을 한다 Virtual DOM은 실제 DOM의 가벼운 메모리 내 복사본이다 React에서 UI의 상태가 변경될 때마다 전체 UI를 Virtual DOM에 다시 렌더링하고, 이 변경사항을 실제 DOM과 비교한 후, 실제 필요한 최소한의 변경만을 실제 DOM에 적용한다 이 접근 방식은 React 앱의 성능을 크게 향상시킨다 Virtual DOM 작동 원리 초기 렌더링: React 컴포넌트가 렌더링될 때, React는 컴포넌트의 JSX를 사용하여 Virtual DOM을 생성하고 이 Virtual DOM을 사용하여 실제 DOM을 업데이트한다 상태 변경: 애플리케이션의 상태가 변경되면, React는 새로운 Virtual D.. 2024. 3. 5. 이전 1 2 3 4 5 6 다음
