공부계획

지난 공부 복습하기

현재 듣고 있는 강의의 ‘자바스크립트 복습’ 부분을 마무리하기.

본격적으로 react 부분 공부하기

• 리액트 기초 및 컴포넌트 실습
• 리액트 State 및 이벤트 다루기

참조형 및 원시형 데이터 타입

const person = {
  name : 'MAX'
};

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

const person = {
  name : 'MAX'
};

const secondPerson = person;
person.name = 'Manu';
console.log(secondPerson);

출력이 바뀌는 이유는 포인터를 복사 후, Person이 가리키는 메모리에 있는 동일한 객체를 가리키기 때문이다. 따라서 person의 name을 변경하면 자동적으로 secondPerson의 이름도 바뀐다.

배열도 마찬가지이다.

리액트에서는 중요한 부분인데, 만약 객체나 배열을 위와 같은 방식으로 복사한다면, 한 앱에 있는 주소에서 객체를 조작할 수 도 있다. 그리고 앱의 다른 주소에 있는 같은 객체를 다르게 사용하도록 조작할 수 있다.

⇒ 따라서 변경할 수 없는 방법으로 복사를 하는 법을 배워야(포인터가 아닌 객체를 복사하는 방법) + 스프레드 연산자 사용 가능

const person = {
  name : 'MAX'
};

const secondPerson = {
 ...person
};

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

‘person 객체를 생성하고 속성을 spread하는 방법을 사용’하면 객체로 부터 속성과 속성 값을 가져와 새로 생성한 객체에 추가하게 됨. 이 때 중괄호를 사용해 생성할 수 있다.

Manu가 아닌 MAX가 출력되는 이유는 포인터가 아닌 진짜 복사본을 생성했기 때문이다.