⚛️ 함수형 프로그래밍, 객체지향, 클로저, 리액트, 불변성의 연관성 총정리
현대 자바스크립트 프로그래밍 패러다임의 핵심 개념들을 하나의 흐름으로 정리한 문서입니다.
함수형 프로그래밍, 객체지향 프로그래밍, 클로저, 렉시컬 환경, 가비지 컬렉션, 리액트, 그리고 불변성까지의 관계를 다룹니다.
🧩 1. 프로그래밍 패러다임: 함수형 vs 객체지향
🧠 함수형 프로그래밍 (Functional Programming)
- 데이터를 변경하지 않고,
순수 함수(pure function) 를 이용해 새로운 값을 만들어내는 방식. - 상태나 부작용(side effect)을 최소화하여 예측 가능한 코드 작성.
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(n => n * 2);➡️ 같은 입력 → 같은 출력, 불변성 유지, 선언형 코드
핵심 키워드: 불변성, 순수함수, 선언형
⚙️ 객체지향 프로그래밍 (Object-Oriented Programming)
- 데이터(state)와 동작(behavior)을 객체로 묶어 관리하는 방식.
- 상태를 변경하며 동작하는 메서드를 중심으로 설계.
const counter = {
count: 0,
inc() {
this.count++;
return this.count;
}
};➡️ 내부 상태가 변경되며, 부작용을 허용.
핵심 키워드: 상태, 캡슐화, 명령형
🔁 2. 클로저(Closure): 함수형 문법 속의 객체지향 개념
클로저는 함수형 문법으로 작성되었지만, 내부적으로는 상태를 은닉하는 객체지향적 개념입니다.
function counter() {
let count = 0;
return function() {
count++;
return count;
};
}
const inc = counter();
inc(); // 1
inc(); // 2- 함수가 실행된 후에도 내부 변수(
count)를 기억. - 외부에서 접근 불가한 은닉된 상태.
➡️ 함수형 문법 + 객체지향적 캡슐화 = 클로저
즉, 하이브리드 구조.
🌐 3. 렉시컬 환경(Lexical Environment)
클로저가 상태를 기억하는 비밀은 렉시컬 환경에 있습니다.
함수가 선언될 때의 “변수 스코프”를 기억하고 저장하는 내부 구조.
function outer() {
let x = 10;
function inner() {
console.log(x);
}
return inner;
}
const fn = outer();
fn(); // 10inner는outer의 렉시컬 환경을 기억.- 이 덕분에
outer실행이 끝나도x에 접근 가능.
➡️ 클로저 = 함수 + 렉시컬 환경의 조합.
🧹 4. 가비지 컬렉션(Garbage Collection, GC)
자바스크립트는 자동 메모리 관리 언어입니다.
즉, 사용되지 않는 객체(도달 불가능한 객체)는 GC가 자동으로 해제합니다.
원리: 도달 가능성 (Reachability)
루트 객체(전역, 스택 등)에서 더 이상 참조되지 않으면 GC의 대상이 된다.
let user = { name: "Alice" };
user = null; // 이제 GC가 메모리 해제 가능클로저와 GC
function makeCounter() {
let count = 0;
return () => ++count;
}
for (let i = 0; i < 10000000; i++) {
makeCounter(); // 반환된 함수는 저장되지 않음
}- 리턴된 클로저를 어디에도 저장하지 않으면, 그 렉시컬 환경은 GC가 제거.
- 참조가 남아 있으면 메모리 유지.
➡️ GC는 “참조가 끊어진 렉시컬 환경”을 자동으로 해제.
⚛️ 5. 리액트(React): 함수형 철학을 객체지향 엔진으로 구현한 프레임워크
1️⃣ 함수형 철학
“UI는 상태의 함수다”
UI = f(state)
function Greeting({ name }) {
return <h1>Hello, {name}</h1>;
}- 같은 입력 → 같은 출력 (순수함수)
- 상태 변화에 따라 UI 갱신
- 선언형 프로그래밍 방식
➡️ 리액트의 컴포넌트 함수는 전형적인 함수형 패러다임.
2️⃣ 객체지향 구조 (내부 구현)
리액트 엔진(Fiber)은 객체 트리 구조로 동작합니다.
- 각 컴포넌트 인스턴스가 객체(Fiber node)로 표현됨
- 렌더링, 스케줄링, 상태 관리 등은 객체 간 연결 관계로 처리
- 과거
class Component는 완전한 객체지향 형태였음
➡️ 리액트 내부 구조 = 객체지향, 사용 방식 = 함수형
즉, 철학은 함수형, 구조는 하이브리드.
3️⃣ Hooks와 클로저의 관계
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}useState는 클로저를 사용해 상태를 기억.- 하지만 상태를 직접 변경하지 않고 새로운 상태를 생성함.
➡️ 클로저(객체지향적 도구)를 함수형 철학(불변성) 으로 사용하는 구조.
🧱 6. 불변성(Immutability)
데이터를 “변경”하지 않고, “새로운 데이터”로 교체하는 성질.
❌ 가변적 코드
let user = { name: "Alice" };
user.name = "Bob"; // 원본 변경✅ 불변적 코드
let user = { name: "Alice" };
let newUser = { ...user, name: "Bob" }; // 새 객체 생성왜 중요할까?
- 예측 가능성 향상 (상태 추적 쉬움)
- 버그 예방 (공유 참조 문제 제거)
- 리액트 성능 최적화 (얕은 비교 가능)
리액트는 === 비교로 상태 변화를 감지하기 때문에,
불변성을 지켜야만 올바르게 리렌더링됩니다.
🔗 7. 전체 연관성 요약
| 개념 | 핵심 역할 | 리액트와의 관계 |
|---|---|---|
| 함수형 프로그래밍 | 순수함수, 불변성, 선언형 사고 | 컴포넌트 구조, Hooks 철학 |
| 객체지향 프로그래밍 | 상태와 행동의 캡슐화 | Fiber 내부 구조, Class 컴포넌트 |
| 클로저 | 함수형 문법으로 구현된 은닉된 상태 | useState, useEffect의 내부 메커니즘 |
| 렉시컬 환경 | 함수의 스코프 기억 구조 | Hooks의 상태 유지 원리 |
| 가비지 컬렉션 | 참조 끊긴 메모리 자동 정리 | 미사용 상태 자동 해제 |
| 불변성 | 예측 가능한 상태 변경 방식 | 리렌더링 감지 핵심 메커니즘 |
🧭 8. 한 문장으로 정리
리액트는 함수형 프로그래밍 철학을 기반으로,
객체지향적 엔진(Fiber) 위에서 동작하며,
클로저와 불변성을 활용해 상태를 효율적으로 관리하는
하이브리드 선언형 프레임워크이다.
