[ React / 데이터] 메모리 관점으로 JavaScript와 React는 어떻게 다른가?

메모리 관점에서 React를 고려해 보면

리엑트는 메모리 주소를 참조하고 있다. 따라서 메모리 주소가 변경되어야만 Rendering을 시도한다.

 

	JavaScript	React
메모리 관점	직접적인 메모리 조작, 단일 참조	불변성 기반 새로운 메모리 할당, 여러 버전의 상태 유지
상태 보존	단일 상태만 유지	이전 상태의 히스토리 관리 가능(시간 여행을 통한 디버깅)
메모리 사용량	효율적인 메모리 사용 bc 직접 수정	약간 더 많은 메모리 사용 bc 새로운 객체 생성하기 때문
가비지 컬렉션	let obj = { value : 123} obj = null 즉시 대상	const [ obj, setObj ] = useState({value : 123}); setObb(null) 내구적으로 관리하며 적절한 시점에 GC 처리

 

 

1. 데이터 처리

javaScript : 값이 스택 메모리에 직접 저장

React : 값은 스택 메모리에 저장되지만, React 의 내부 상태 관리 시스템에도 저장됨

 

// JavaScript
let arr = [1, 2, 3]
arr.push(4)
=> 직접 수정 가능

메모리 주소 : #123 : [1,2,3]arr -> #123

 

const [ arr, setArr ] = useState([1, 2, 3]);
setArr([...arr, 4])
=> 새로운 배열 생성 필요(새로운 새로운 참조 값이 필요)

메모리 주소 #123 ; [1, 2, 3]  // 원본 배열
메모리 주소 #456 : [1, 2, 3, 4] // 새로운 배열arr -> #456

 

2. 객체 수정

// JavaScript
const user = { name: "John" };
user.age = 25; 
=> 같은 메모리 주소에서 수정

// JavaScript
const data = {
  user: {
    profile: { name: "John" }
  }
};
data.user.profile.age = 25;
=> 직접 수정

3. 중첩된 데이터

// React
const [user, setUser] = useState({ name: "John" });
setUser({ ...user, age: 25 }); 
=> 새로운 메모리 주소에 생성

// React
const [data, setData] = useState({
  user: {
    profile: { name: "John" }
  }
});

setData({
  ...data,
  user: {
    ...data.user,
    profile: {
      ...data.user.profile,
      age: 25
    }
  }
}); 
=> 새로운 객체 트리 생성