생각정리

React useState의 동작방식과 Lazy Initialization

1. useState 구현체 React의 useState는 상태를 선언하고 관리하는 가장 기본적인 훅이다. 이를 바닐라 JavaScript로 단순화하면 아래와 같은 형태로 생각할 수 있다.let currentComponent = null;function useState(initialValue) { if (!currentComponent) { throw new Error('useState must be called within a component'); } const stateIndex = currentComponent.stateIndex; if (!currentComponent.state[stateIndex]) { currentComponent.state[stateIndex] = [ ..

React.memo에 대하여

서론React.memo는 리액트에서 제공하는 최적화 도구로, 컴포넌트의 prop이 shallow하게 같다면 재렌더링을 건너뛰게 해준다. 이를 통해 불필요한 렌더링을 방지하고 성능을 개선할 수 있다. React.memo는 주로 함수형 컴포넌트와 함께 사용되며, 클래스 컴포넌트의 PureComponent와 유사한 역할을 한다.React.memo의 동작 원리React.memo는 렌더링 결과를 메모이제이션(memoization)하여 prop이 shallow하게 같은 경우 렌더링을 생략한다. 기본적으로 React.memo는 prop을 얕은(shallow) 비교로 판단하며, 이 과정에서 다음과 같은 특징이 있다: 1. shallow 비교prop이 객체라면 객체의 레퍼런스를 비교하기 때문에, 내용이 같더라도 새로운 ..

React Native 0.76에서 변경된 기능들

1. 서론 React Native 0.76부터 새로운 Architecture가 기본으로 활성화되었다. 이 글에서는 React Native 0.76의 새로운 기능과 주요 변화 사항을 소개하겠다.2. 새로운 Architecture의 등장 React Native의 새로운 Architecture는 기존 아키텍처의 문제를 해결하고, React 18의 기능을 완벽하게 지원할 수 있도록 설계되었다. react 18에서 그랬듯이, react native 0.76의 핵심 주제도 concurrent인 것 같다. 기존 아키텍처는 bridge를 통해 JavaScript와 네이티브 플랫폼 간의 통신을 비동기적으로 처리했다. 이 방식은 메인 스레드의 부하를 줄이는 데는 효과적이었지만, 비동기 처리만 가능했기 때문에 사용자 입력에..

React 18에서 변경된 Suspense

1. 서론 React 18에서는 많은 기능이 추가되고 기존 기능이 변화되었다. 특히 Suspense의 기능과 작동 방식에 큰 변화가 있어, 이를 이해하면 React 애플리케이션의 퍼포먼스와 사용자 경험을 크게 향상시킬 수 있다. 이번 글에서는 React 18에서 변경된 Suspense의 작동 원리와 주요 특징에 대해 알아보겠다.2. Suspense의 기본 개념 Suspense는 React 컴포넌트의 일부가 아직 준비되지 않은 경우 React가 표시할 내용을 선언적으로 지정할 수 있게 해주는 기능이다. 예를 들어, 다음과 같이 사용할 수 있다}> }>  위 코드는 특정 컴포넌트가 로딩 중일 때 fallback으로 지정한 요소를 화면에 표시한다. 이때 S..

React에서 hook을 통해 결합도 줄이기

1. 서론 개발을 하면서 제일 많이 하는 일은 기능 추가일 것이다. 물론 백지상태에서 새로운 프로젝트만을 개발하는 개발자들도 있겠지만, 기존의 프로젝트에 기능을 추가하거나 기존의 서비스를 더 발전시키는, 기능을 추가하는, 개발자가 더 많을 것이라고 생각한다.  대부분의 개발자들은 새로운 프로젝트, 백지상태에서 개발하는 것을 더욱 선호할 것 같다. 왜냐하면 기존의 코드들, 레거시 코드와 라이브러리 의존성 등이 기능 추가에 방해가 되는 경우가 많기 때문이다. 특히 나는 두 달전 Node.js contribute를 할 적에 window 환경의 reserved namespace 관련 버그 수정을 하는데 기존의 테스트 코드, 다른 코드들이 그 잘못된 동작이 정상적인 동작이라고 가정하고 짜여진 코드가 많아 brea..

TypeScript: type과 Interface의 차이

서론 TypeScript에서 type과 interface는 모두 타입을 정의하는 방식이지만, 각자 고유한 특징과 장단점을 가지고 있다. 이번 글에서는 type과 interface의 공통점과 차이점을 정리하고, 마지막에는 언제 type을 써야하고 언제 Interface를 쓰는게 적절한지에 대해 써보고자 한다.1. 공통점1.1 특정 필드 제외 (Omit) 기능 type과 interface 모두 Omit 기능을 활용하여 특정 필드를 제외한 새로운 타입을 정의할 수 있다. 이 기능은 보안 등 이유로 일부 속성만 노출하고 싶을 때 유용하다. 다만, type을 사용한 경우 문법이 더 깔끔해지는 장점이 있다.interface User { name: string; age: number; email: string;..

React Custom Hook에 대하여

React Hook이란? React Hook은 함수형 컴포넌트에서 상태와 라이프사이클 기능을 사용할 수 있게 해주는 기능이다. 기존 클래스형 컴포넌트의 복잡성을 줄이고, 함수형 컴포넌트의 재사용성과 가독성을 높여준다. 대표적인 Hook으로는 useState, useEffect, useContext 등이 있으며, 사용자 정의 Hook(Custom Hook)을 통해 비즈니스 로직을 보다 깔끔하게 관리할 수 있다.Hook을 사용하는 이유 Hook을 사용하는 주요 이유는 비즈니스 로직의 분리, 관심사 분리, 캡슐화, 그리고 로컬 상태 관리 등 여러 측면에서의 이점 때문이다. 1. 비즈니스 로직의 분리 Hook을 사용하면 비즈니스 로직을 컴포넌트 외부로 분리하여 재사용 가능한 코드로 만들 수 있다. 이를 통해 중..

React에서 virtual dom을 쓰는 이유

Virtual DOM이란 React는 UI 라이브러리로, 화면을 구성하는 방식에서 명령형이 아닌 선언형 방식을 채택했다. 선언형 방식은 개발자가 어떻게 화면을 업데이트할지 일일이 신경 쓰지 않고, 무엇을 그릴지를 선언하는 데 집중한다. 여기서 중요한 역할을 하는 것이 바로 Virtual DOM(Virtual Document Object Model, VDOM)이다. VDOM은 실제 DOM을 추상화하여 메모리에 저장하는 복사본으로, 리액트가 최적화된 상태 업데이트를 수행할 수 있도록 돕는다. 이 글에서 말하는 vdom은 이하로 react의 vdom만을 가르킨다. VDOM을 사용하는 이유: 선언적 UI와 멱등성 리액트가 VDOM을 도입한 주된 이유는 선언적 UI와 멱등성(idempotency) 때문이다. 명령..