📚 원시형 타입

원시형 자료 타입은 변수를 다른 변수에 저장하거나 재할당할 때마다 값을 복사한다.

• string
• number
• boolean

예시

const number = 1;

const num2 = number;
console.log(num2);
//1

num2를 생성하고 값으로 number를 할당해보자.

• num2는 number의 값을 복사한다.
• 따라서 num2를 콘솔에 찍어보면 복사된 값인 1이 출력되는 것을 확인할 수 있다.

📚 참조형 타입

참조형 자료 타입은 다른 변수에 저장하거나 재할당할 때 값을 참조한다.

• 배열
• 객체

참조값을 복사한 예시

const person = {
  name: 'Euna'
}

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

/*
[object Object] {
  name: "Euna"
}
*/

secondPerson을 생성하여 값으로 person 객체를 할당해보자.

• 콘솔에 secondPerson을 찍어보면 person과 같은 값을 출력하긴 하지만 이는 사실 객체 person을 복사한 것이 아니다.
• 객체 person은 메모리에 저장되어 있고, 상수 person에는 메모리에 있는 주소를 가리키는 포인터(참조 값)가 저장된다.
  그래서 person을 secondPerson에 할당하면 그 포인터가 복사된다.

const person = {
  name: 'Euna'
}

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

/*
[object Object] {
  name: "Euna"
}
*/

person.name = 'BTS';
console.log(secondPerson);

/*
[object Object] {
  name: "BTS"
}
*/

person.name을 BTS로 바꾸고 secondPerson을 콘솔에 다시 찍어보자.

• person 객체의 name만 바꿨을 뿐인데, secondPerson의 name값도 같이 바뀐다.
  secondPerson은 person의 참조값을 복사하고 있기 때문에 person이 가리키는 메모리에 있는 동일한 객체를 가져온다.

배열의 경우도 마찬가지이다.

🌟 아주아주 중요한 포인트!!!

• 참조형 자료 타입을 다루는 것은 리액트에서 아주 중요하다.
  위의 예시와 같이 참조값을 복사해버리면 예상치 못한 결과를 초래할 수도 있다.
  • 만약 객체나 배열을 참조값으로 복사해 버린다면 한 앱에 있는 주소에서 객체를 조작해 버릴 수 있는 문제가 발생한다.
  • 또한 실수로 앱의 다른 주소에 있는 같은 객체를 다르게 사용하도록 조작해 버릴 수도 있다.

참조형 자료 타입을 변경할 수 없는 방법(Immutable: 불변성)으로 복사하기

따라서 불변성(Immutable)으로 복사하는 방법을 꼭! 숙지하도록 하자.

• 변경할 수 없는 방법으로 복사한 다는 것은, 포인터(참조값)가 아닌 객체 자체를 복사하는 것으로, 스프레드 연산자를 사용하여 구현할 수 있다.

const person = {
  name: 'Euna'
}

const secondPerson = {
  ...person
}
console.log(secondPerson);

/*
[object Object] {
  name: "Euna"
}
*/

person.name = 'BTS';
console.log(person);
/*
[object Object] {
  name: "BTS"
}
*/

console.log(secondPerson);
/*
[object Object] {
  name: "Euna"
}
*/

person 객체를 secondPerson객체로 복사할 때, 변하지 않는 방법(Immutable)으로 객체로 복사해보자.

• {}를 사용하여 새롭게 객체를 생성하고 person객체의 프로퍼티를 스프레드...한다.
  그러면 person객체로 부터 프로퍼티와 값을 받아와 복사된다.
• 콘솔에 person과 secondPerson을 찍어보면 각각 name이 다른 것을 확인 할 수 있다.
  secondPerson은 독립적인 객체로 person객체를 참조하지 않는 것을 확인할 수 있다.

❗️ 객체와 배열은 참조형 자료 타입이라는 것을 꼭 기억하자!

• 재할당하면 값이 아닌 포인터(참조 값)를 복사하는 것이다.
• 진짜로 복사하고 싶다면 새로운 객체를 생성해서 전체 객체를 복사하는 것이 아닌 프로퍼티를 스프레드 하여 복사해야 한다.