분류 전체보기

React Hook이란 무엇인가

서론 React Hook은 컴포넌트 계층 구조를 변경하지 않고 상태 관련 로직을 재사용할 수 있도록 도와주는 기능이다. 이를 통해 컴포넌트의 로직을 더 작은 단위로 나눌 수 있으며, React를 클래스 없이 사용할 수 있게 한다. 또한 Hook은 Custom Hook을 통해 특정 로직을 추상화하고 여러 컴포넌트에서 재사용할 수 있도록 만들어준다.Hook을 쓰는 이유 Hook이 도입된 이유는 여러 가지다. 우선 stateful한 로직을 컴포넌트 간에 재사용하기 어려운 문제를 해결하기 위함이다. Hook을 사용하면 상태 로직을 컴포넌트에서 분리하여 독립적으로 테스트하고 재사용할 수 있다. 또한 복잡한 컴포넌트를 더 이해하기 쉽게 만드는 데에도 유용하다. 기존의 lifecycle method를 기준으로 컴포넌..

Redux의 기본 개념

서론 Redux는 애플리케이션의 상태 관리를 단순화하기 위한 JavaScript 라이브러리이다. Redux의 핵심은 모든 상태 변경을 액션이라는 명확한 객체로 설명하는 것이다. 이를 통해 상태가 어떻게, 왜 변경되는지 명확히 알 수 있다. Redux의 철학은 “변화가 발생했다면, 그 이유를 알 수 있어야 한다”는 것이다.  이 글에서는 Redux의 기본 컨셉들과 사용법에 대해 알아보고자 한다Action: 상태 변경의 설명서 Action은 애플리케이션에서 발생하는 일을 설명하는 JavaScript 객체이다. Redux에서 모든 상태 변경은 Action 객체에 의해 발생한다. Action은 type 속성을 반드시 가지고 있으며, 상태 변경에 필요한 추가 데이터를 포함할 수 있다.{ type: 'ADD_TOD..

Redux Middleware와 dispatch의 관계

서론 Redux 톺아보기를 공부하며 “액션을 dispatch만 했는데, Redux는 어떻게 미들웨어를 실행하는 걸까?“라는 질문에 대한 답을 나름대로 내려보는 글이다. 이에 대한 답을 하기 위해서는 Redux의 내부 동작 원리, 특히 applyMiddleware 함수와 compose 함수를 이해해야 하는 것 같다.이번 글에서는 Redux의 dispatch와 미들웨어가 어떻게 연결되고 동작하는지 단계별로 설명한다.기본 dispatch의 동작 Redux의 기본 dispatch는 단순하다.dispatch는 액션을 리듀서로 전달하고, 상태를 업데이트하는 역할을 한다.const store = createStore(reducer);store.dispatch({ type: 'INCREMENT' });// 기본 dis..

JavaScript 이벤트 루프 동작방식: Microtask Queue, Macrotask Queue

console.log(1);setTimeout(() => console.log(2));Promise.resolve().then(() => console.log(3));Promise.resolve().then(() => setTimeout(() => console.log(4)));Promise.resolve().then(() => console.log(5));setTimeout(() => console.log(6));console.log(7);서론 JavaScript의 이벤트 루프는 비동기 작업을 관리하며 프로그램 실행의 중심 역할을 한다. JavaScript 코드가 실행되면 객체와 기본형 변수는 메모리의 힙과 메모리 스택에 로드된다. 이후 함수 호출과 비동기 작업은 콜 스택, 콜백 큐, 마이크로태스크 큐..

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..