✅ JavaScript의 원시 타입과 참조 타입의 차이는? 완전 정복 가이드

✅ JavaScript의 원시 타입과 참조 타입의 차이는? 완전 정복 가이드

프론트엔드 면접에서 자주 등장하는 **JavaScript의 원시 타입(Primitive Type)**과 **참조 타입(Reference Type)**의 차이는, 단순한 이론적 지식이 아니라 코드 설계, 버그 추적, 성능 최적화까지 연결되는 실전 지식입니다.
이번 글에서는 면접 대비를 넘어 실무에서의 적용 방법까지 정리해보겠습니다.

---

📌 1. 기본 개념: 메모리 저장 방식이 다르다

🔹 원시 타입 (Primitive Type)

• **불변 값(Immutable)**이며, 값 자체를 저장함.
• 변수에 할당 시 값이 복사되어 전달됨.
• typeof로 식별 가능

타입 예시

string	'hello'
number	42
boolean	true
null	null
undefined	undefined
symbol	Symbol('id')
bigint	123n

let a = 10;
let b = a;
b = 20;

console.log(a); // 10
console.log(b); // 20

a와 b는 독립적으로 값이 저장됨.

---

🔹 참조 타입 (Reference Type)

• **가변 값(Mutable)**이며, **객체의 주소(참조)**를 저장함.
• 변수에 할당 시 참조가 복사되어 전달됨 → 원본 변경 가능성 존재

타입 예시

object	{ name: 'hun' }
array	[1, 2, 3]
function	function() {}

let obj1 = { name: "hun" };
let obj2 = obj1;
obj2.name = "chan";

console.log(obj1.name); // "chan"

obj1과 obj2는 같은 객체를 참조 → 하나를 수정하면 둘 다 영향받음.

---

📌 2. 실무에서 흔히 겪는 문제 상황

반응형

🎯 경험 사례: 배열 데이터가 자동으로 바뀌는 버그

🧪 상황

React에서 상태 관리를 하던 중, 배열 상태를 다른 변수로 복사해 수정했더니 원본까지 변경됨.

const [items, setItems] = useState([1, 2, 3]);

const handleUpdate = () => {
  const copied = items;  // ❌ 얕은 복사
  copied.push(4);
  setItems(copied); // 원본도 바뀌었기 때문에 예상치 못한 렌더링 발생
}

💥 원인

items는 참조 타입 배열이며, copied는 같은 메모리 주소를 공유함. 복사는 됐지만 "주소"가 복사된 것일 뿐.

✅ 해결 방법

const copied = [...items]; // ✅ 전개 연산자로 얕은 복사
copied.push(4);
setItems(copied);

또는 lodash의 cloneDeep()으로 깊은 복사도 가능.

---

📌 3. 깊은 복사 vs 얕은 복사

구분 설명 예시

얕은 복사	최상위만 복사, 내부 객체는 참조 공유	Object.assign(), spread (...)
깊은 복사	내부 객체까지 모두 새로운 객체 생성	JSON.parse(JSON.stringify(obj)), lodash.cloneDeep()

---

📌 4. 면접 시 이렇게 답하세요

JavaScript의 원시 타입은 값 자체를 저장하는 불변 값이며, 참조 타입은 객체의 메모리 주소를 저장하는 가변 값입니다.
따라서 원시 타입은 값 복사가 일어나고, 참조 타입은 참조 복사가 일어나기 때문에 원본 데이터의 변경 가능성을 고려해야 합니다.
실무에서는 상태 관리 시 참조 타입을 다룰 때 불변성을 유지하기 위해 전개 연산자나 깊은 복사 방법을 활용합니다.

---

📌 5. 정리

항목 원시 타입 참조 타입

저장 방식	값 자체	메모리 참조(주소)
불변성	불변	가변
복사 시 결과	값 복사	참조 복사
예시	string, number	object, array, function

---

🏁 마무리: 코드의 본질은 메모리 흐름의 이해다

이 질문은 단순한 암기가 아니라, 메모리와 복사, 참조에 대한 감각을 평가합니다.
React 상태 관리, Redux Store, API 응답 캐싱 등 실무에서 다양한 곳에 응용되니 "진짜 차이"를 체감하며 학습하는 것이 중요합니다.

---

JavaScript,참조타입,원시타입,프론트엔드면접,React상태관리,얕은복사,깊은복사,불변성,면접대비,메모리관리