TIL - JavaScript 메모리 구조와 React 메모리 관리

JavaScript 메모리 구조

JavaScript의 메모리 구조는 주로 세 가지 주요 영역으로 나뉩니다: 스택(Stack), 힙(Heap), 그리고 코드(Code) 영역입니다. 각 영역은 특정 종류의 데이터를 저장하고 관리하는 데 사용됩니다.

 

1. 스택 영역 (Stack Area)

역할:

• 함수 호출 시 생성되는 호출 스택(Call Stack)과 로컬 변수(Local Variables)를 저장합니다.
• 스택 메모리는 고정된 크기를 가지며, 매우 빠르게 데이터를 할당하고 해제할 수 있습니다.

구조:

• 콜 스택(Call Stack): 함수 호출과 반환이 기록됩니다. 함수가 호출될 때마다 새로운 스택 프레임이 추가되고, 함수가 종료되면 해당 프레임이 제거됩니다.
• 로컬 변수: 함수 내에서 선언된 변수들이 저장됩니다.

┌─────────────────────────┐        ┌─────────────────┐
│        Call Stack       │        │ Local Variables │ 
│ ┌─────────────┐         │        │ ┌─────────────┐ │
│ │ Func A      │         │        │ │ let 1       │ │
│ │─────────────│         │        │ │─────────────│ │
│ │ Func B      │         │        │ │ const 2     │ │
│ └─────────────┘         │        │ └─────────────┘ │
│                         │        │                 │
└─────────────────────────┘        └─────────────────┘

 

 

 

2. 힙 영역 (Heap Area)

역할:

• 객체(Object)와 배열(Array)과 같은 참조 타입 데이터를 저장합니다.
• 동적 메모리 할당을 처리하며, 가비지 컬렉션에 의해 메모리가 관리됩니다.

구조:

• 객체와 배열: 힙은 크기가 변할 수 있는 동적 데이터를 저장하는 데 사용됩니다. 이 데이터는 참조에 의해 접근됩니다.

┌─────────────────────────┐
│         Heap            │
│ ┌─────────────┐         │
│ │ {obj1: ...} │         │
│ │─────────────│         │
│ │ [arr1, ...] │         │
│ └─────────────┘         │
│                         │
└─────────────────────────┘

 

 

3. 코드 영역 (Code Area)

역할:

• 함수 정의(Function Definitions)와 전역 변수(Global Variables)를 저장합니다.
• 코드 자체와 상수 데이터(Constant Data)를 저장합니다.

구조:

• 함수 정의: 프로그램 실행 시점에서 로드된 함수 코드가 저장됩니다.
• 전역 변수: 프로그램 전체에서 사용되는 변수가 저장됩니다.

┌─────────────────────────┐
│         Code            │
│ ┌─────────────┐         │
│ │ function A()│         │
│ │─────────────│         │
│ │ var global  │         │
│ └─────────────┘         │
│                         │
└─────────────────────────┘

 

이벤트 루프와 콜 스택

 

이벤트 루프(Event Loop):

• JavaScript는 싱글 스레드 언어로, 이벤트 루프는 비동기 작업을 처리하는 데 중요한 역할을 합니다.
• 이벤트 루프는 콜 스택이 비어 있을 때 태스크 큐(Task Queue)에서 콜백을 가져와 실행합니다.

콜 스택(Call Stack):

• 현재 실행 중인 함수가 쌓이는 데이터 구조입니다.
• 함수 호출 시 스택에 쌓이고, 함수 종료 시 스택에서 제거됩니다.

┌──────────────────────────────┐
│       JavaScript Engine      │
│ ┌──────────────┐  ┌────────┐ │
│ │ Call Stack   │  │  Heap  │ │
│ │  ┌────────┐  │  │ ┌────┐ │ │
│ │  │ Func A │  │  │ │Obj1│ │ │
│ │  └────────┘  │  │ └────┘ │ │
│ │  ┌────────┐  │  │ ┌────┐ │ │
│ │  │ Func B │  │  │ │Arr1│ │ │
│ │  └────────┘  │  │ └────┘ │ │
│ └──────────────┘  └────────┘ │
│ ┌───────────────────────────┐ │
│ │     Local Variables       │ │
│ │  ┌───────────┐  ┌───────┐ │ │
│ │  │ let c     │  │ Obj 1 │ │ │
│ │  │ let d     │  │ Arr 1 │ │ │
│ │  └───────────┘  └───────┘ │ │
│ └───────────────────────────┘ │
└──────────────────────────────┘
              │
              │
┌──────────────────────────────┐
│         Event Loop           │
└──────────────────────────────┘
              │
              ▼
┌──────────────────────────────┐
│        Task Queue            │
│ ┌──────────────┐  ┌────────┐ │
│ │ setTimeout   │  │Promise │ │
│ │ callback     │  │callback│ │
│ └──────────────┘  └────────┘ │
└──────────────────────────────┘

 

 

React와 메모리 구조

React도 JavaScript를 기반으로 하므로 기본적인 메모리 구조는 동일합니다. 그러나 React는 컴포넌트 기반 아키텍처와 가상 DOM(Virtual DOM)을 사용하여 메모리를 관리하고 최적화합니다.

 

React의 메모리 관리:

 

• 컴포넌트 상태 (Component State):
  • 각 컴포넌트의 상태(State)는 힙에 저장됩니다.
  • 상태 변경이 발생하면, React는 이를 감지하고 컴포넌트를 다시 렌더링합니다.
• 가상 DOM (Virtual DOM):
  • 실제 DOM과의 차이를 최소화하기 위해 메모리 상에서 가상 DOM을 사용합니다.
  • 가상 DOM은 실제 DOM의 가벼운 복제본이며, 변경 사항을 효율적으로 관리합니다.
• 컴포넌트 라이프사이클 (Component Lifecycle):
  • 컴포넌트의 생성과 소멸에 따라 메모리가 할당되고 해제됩니다.
  • React는 컴포넌트 라이프사이클 메서드를 통해 메모리 관리 및 최적화를 수행합니다.

 

// 기본 메모리 구조는 JS와 동일
┌─────────────────────────┐        ┌─────────────────┐
│        Call Stack       │        │ Local Variables │ 
│ ┌─────────────┐         │        │ ┌─────────────┐ │
│ │ Func A      │         │        │ │ let 1       │ │
│ │─────────────│         │        │ │─────────────│ │
│ │ Func B      │         │        │ │ const 2     │ │
│ └─────────────┘         │        │ └─────────────┘ │
│                         │        │                 │
└─────────────────────────┘        └─────────────────┘

 

 

 

React의 메모리 관리

컴포넌트 상태:

┌─────────────────────────┐
│         Heap            │
│    ┌─────────────┐      │
│    │{state: ...} │      │
│    │─────────────│      │
│    │{props: ...} │      │
│    └─────────────┘      │
│                         │
└─────────────────────────┘

 

가상 DOM:

┌─────────────────────────┐
│       Virtual DOM       │
│ ┌─────────────┐         │
│ │ <div>       │         │
│ │   <h1>      │         │
│ │     Text    │         │
│ │   </h1>     │         │
│ │ </div>      │         │
│ └─────────────┘         │
│                         │
└─────────────────────────┘

 

 

React 컴포넌트 라이프사이클

┌───────────────────────────────────────────────────────┐
│            Component Lifecycle                        │
│ ┌─────────────────────┐  ┌─────────────────────────┐  │
│ │    Mounting         │  │ Updating                │  │
│ │ ┌─────────────┐     │  │ ┌──────┐                │  │
│ │ │ constructor │     │  │ │render│                │  │
│ │ └─────────────┘     │  │ └──────┘                │  │
│ │ ┌─────────────────┐ │  │ ┌──────────────────────┐│  │
│ │ │componentDidMount│ │  │ │ shouldComponentUpdate││  │
│ │ └─────────────────┘ │  │ └──────────────────────┘│  │
│ └─────────────────────┘  └─────────────────────────┘  │
│                                                       │
│ ┌────────────────────────┐                            │
│ │ Unmounting             │                            │
│ │ ┌────────────────────┐ │                            │
│ │ │componentWillUnmount│ │                            │
│ │ └────────────────────┘ │                            │
│ └────────────────────────┘                            │
└───────────────────────────────────────────────────────┘