[React]리액트 학습 기록 - 참조형 및 원시형 데이터 타입

gamja·2023년 1월 27일
0
post-thumbnail

🧐자바스크립트 타입 유형

  • 기본형 자료 타입 : number, string, boolean이 기본형 타입에 해당한다. 기본형 자료 타입은 값을 재할당하거나 변수를 다른 변수에 저장할 때마다 값을 복사한다.
  • 참조형 자료 타입 : 객체와 배열이 참조형 타입에 해당한다. 변수를 다른 변수에 저장할 때 값을 복사하는 것이 아니라 참조 주소를 가리키는 포인터를 저장한다.

🔗참조형 타입(객체)

// 객체 생성
const person = {
  name : 'Max'
};

// 포인터 복사
const secondPerson = person;

// 출력
console.log(person);
console.log(secondPerson);

// person
[object Object] {
  name: "Max"
}
// secondPerson
[object Object] {
  name: "Max"
}

위와 같이 person을 secondPerson에 할당하면 값이 복사되는 것이 아니라 데이터는 person에 그대로 존재하고, 해당 데이터를 가리키는 포인터가 복사 되어 같은 값이 나오는 것이다.

따라서 person의 name을 변경하면 자동으로 secondPerson의 이름도 바뀐다.

👩‍💻객체 완전 복사

위와 같은 방식은 완전한 객체 복사라고 하기에는 무리가 있다.
예를 들면, A를 B에 복사했는데, 실수로 A를 변경하면 B또한 값이 변경되고 만다. 이러한 문제를 해결하기 위해 복사된 값을 변경할 수 없도록 포인터를 복사하는 것이 아닌, 객체를 복사하는 방법이 존재한다.

스프레드 연산자 사용

// 객체 생성
const person = {
  name : 'Max'
};

// 객체 복사
const secondPerson = {
  ...person
};

person.name = 'Namu';

console.log(person);
console.log(secondPerson);

// person 결과
[object Object] {
  name: "Namu"
}
// secondPerson 결과
[object Object] {
  name: "Max"
}

이렇게 값을 복사해주면 person의 name 값을 변경해도 secondPerson의 값은 변경되지 않는다.

✍️정리

number, string, boolean은 기본형 자료 타입에 해당한다. 이들은 재할당을 할 때 값이 복사된다.

반면 객체, 배열은 참조형 자료 타입에 해당한다. 이들은 재할당을 할 때 포인터가 복사된다. 따라서 완전 복사를 하고 싶다면 새로운 객체를 생성해서 전체 객체를 복사하는 것이 아니라, 프로퍼티를 복사해줘야 한다.

profile
눈도 1mm씩 쌓인다.

0개의 댓글