Frontend14 React 상태 관리 최적화: useState에서 useReducer로 전환하기 useState에서 useReducer로의 전환: 복잡한 상태 관리 최적화React 애플리케이션에서 상태를 관리하는 방법은 다양하다. 가장 기본적인 상태 관리 방법으로는 useState가 있지만, 상태 로직이 복잡해지거나 관련된 액션이 많아질 경우 useReducer를 활용하는 것이 더 효율적이다. 이 글에서는 useState와 useReducer의 차이점과 useReducer를 적용하는 방법에 대해 살펴본다.1. useState vs useReduceruseStateuseState는 React 컴포넌트 내부에서 상태를 관리하는 가장 간단한 방법이다.그러나 상태 로직이 복잡해질수록 useState를 여러 개 사용하는 경우가 늘어나며, 상태 업데이트 로직이 분산될 가능성이 있다.useState 예제impo.. 2025. 2. 3. 브라우저의 렌더링 과정과 React의 최적화 기법 브라우저의 렌더링 과정과 React의 최적화 기법웹 애플리케이션이 사용자에게 화면을 제공하는 과정은 여러 단계로 이루어진다. 특히 브라우저가 HTML, CSS, JavaScript를 처리하여 화면을 그리는 과정은 성능 최적화와 직결되며, React와 같은 라이브러리는 이러한 과정을 최적화하는 다양한 기법을 제공한다.1. 브라우저의 렌더링 과정웹페이지를 불러오는 과정에서 브라우저는 다음과 같은 순서로 리소스를 처리한다.HTTP(S) 요청 및 리소스 다운로드사용자가 특정 URL을 입력하면, 브라우저는 해당 서버와 HTTP(S) 프로토콜을 통해 통신하고 필요한 HTML, CSS, JavaScript, 이미지 등의 리소스를 다운로드한다.HTML 파싱 및 DOM(Document Object Model) 생성브라우.. 2025. 1. 31. [iframe 사용법 및 속성값 가이드] MDN 문서를 기반으로 작성한 가이드 문서 iframe 태그: 인라인 프레임 요소에 대한 가이드HTML의 요소는 현재 문서 내에 다른 HTML 페이지를 중첩하여 임베딩할 수 있도록 하는 강력한 도구입니다. 이 가이드는 iframe 사용법을 단계별로 설명하며, 각 속성과 기능을 상세히 다룹니다.1. iframe의 기본 개념iframe은 중첩된 브라우징 컨텍스트(browsing context)를 제공하여 별도의 HTML 페이지를 현재 페이지 안에 임베딩합니다. 각 iframe은 독립적인 문서 환경을 가지며, 자체 URL 내비게이션을 지원합니다.최상위 브라우징 컨텍스트: 부모가 없는 브라우징 컨텍스트(일반적으로 브라우저 창).부모 브라우징 컨텍스트: iframe을 포함하고 있는 브라우징 컨텍스트.⚠️ 주의: iframe은 추가적인 메모리와 컴퓨팅 리.. 2024. 11. 19. [javascript] 생성자 함수는 어떤 과정으로 인스턴스를 생성할까? 생성자 함수는 인스턴스를 생성하기 위한 '템플릿'처럼 동작한다. 즉 인스턴스를 생성하고, 이 인스턴스에 프로퍼티를 추가하고 초기값을 할당하여 초기화 하는 것이다. 아래와 같은 생성자 함수 정의를 보면, 인스턴스를 초기화하는(값 할당) 부분은 있지만 인스턴스를 생성하고 반환하는 코드가 없다. (그래서 아래 Language를 일반 함수처럼 호출하면 반환값이 undefined이기도 하다. - 참고)function Language(name) { this.name = name; this.getName = function() { return 'my name: ' + this.name ; }}; 그런데 어떻게 생성자 함수를 호출하면 객체(인스턴스)가 생성되어 반환되는 것일까? new 연산자.. 2024. 4. 25. [javascript] 생성자 함수에 의한 객체 생성 - 언제 필요하고 어떻게 사용하는가? 객체를 생성할때 아래와 같이 객체 리터럴로 객체를 생성하는 것이 가장 간단한 방식일 것이다. const objectByObjectLiteral = { name: 'javascript'}; 하지만 아래와 같이 동일한 구조의 객체를 여러 개 생성해야 할 때 (특히 프로퍼티의 갯수가 많고, 동일한 내용의 메서드들이 있는 경우) 객체 리터럴로 객체를 생성하는 방식은 다소 비효율적일 수 있다. 이런 경우에 생성자 함수로 객체를 생성하는 방법을 사용해볼 수 있다. const js = { name: 'javascript'; getName() { return 'my name: ' + this.name ; }};const html = { name: 'ht.. 2024. 4. 18. [javascript] this 개념과 this 바인딩 이해하기 아래와 같은 생성자 함수가 있다.function Circle(radius) { ...} 이 생성자 함수를 가지고 new Circle(5) 로 새로운 인스턴스를 생성했을때, 인수로 받은 radius 값 5를 생성한 인스턴스의 radius 값으로 할당하려면 어떻게 해야할까? 또, 아래와 같이 Circle의 prototype으로 지름을 구하는 메서드를 추가해서, Circle 생성자 함수가 생성한 인스턴스의 지름을 구하려면 어떻게 해야할까? Circle.prototype.getDiameter = function () { ...} 닭이 먼저이냐 달걀이 먼저이냐의 문제처럼, 생성자 함수 내에서 생성자 함수가 생성할 인스턴스를 참조할 수는 없다. 왜냐하면, 생성자 함수가 먼저 정.. 2024. 4. 11. 이전 1 2 3 다음 반응형
