[패스트캠퍼스:5주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 4/5

JS 데이터

 

 

객체 데이터

정적 메서드

(static method)

Object.메서드() 형식으로

객체 데이터 자체에 사용할 수 없다.

Object 전역 객체에 직접 사용한다.

 

 

.Object.assign()

대상 객체에, 한 개 이상의 다른 객체를 붙여 넣고 덮어 씌운다.

첫 번째 인수가 대상 객체

대상 객체는 원본이 수정된다.

 

 

참조형 데이터 / 원시형 데이터

참조형 데이터 : 메모리에 있는 특정 주소를 참고만 한다. 객체, 배열, 함수

원시형 데이터 : 불리언, 글자, 숫자 데이터

a와 b는 데이터 값이 동일하지만,

참조형 데이터로 서로 다른 주소를 참조하고 있어서

데이터가 같지 않다.

 

 

target과 userAge는 동일한 메모리 주소를 참조한다.

 

빈 객체를 대상 위치에 넣어서 새로운 객체를 생성했는데,

그 값이 같아 보이지만

다른 메모리 주소를 참조한다.

 

Object.keys()

객체의 key 값을 배열로 반환한다.

반환된 배열(keys)을 map의 콜백으로

객체 인덱싱(user[키])을 실행시켜서

각 키의 값을 새로운 배열로 반환한다.

 

---

 

구조 분해 할당 (Destructuring assignment) or 비구조화 할당

객체/배열 데이터의 구조를 분해해서 각각 변수로 만들어서 활용할 수 있다.

점표기법, 객체 인덱싱과 동일하다.

(예. user.name, user[name])

객체

const { 키, 키 } = 객체

작성 순서가 일반 객체를 뒤집은 모양이다.

객체의 키/프로퍼티로 값을 추출하고

변수명을 ':(콜론)'을 통해서 바꿀 수 있다.

(예. name: heropy)

 

기본값을 설정하면 해당 프로퍼티의 값이 없을 때 기본값이 반환된다.

(예. address = 'Korea')

 

배열

순서로 값을 추출하는 배열.

중간에 추출하고 싶지 않은 아이템은 빈칸으로 두고 ', (쉼표)'로 구분 짓는다.

(예. [a, , c])

 

---

 

전개 연산자 (Spread)

배열의 모든 아이템을 각각 문자 데이터로 반환한다.

toObject 함수에는 전개된 fruits 아이템이 각각 매개변수 a, b, c에 들어간다.

매개변수도 전개 연산자가 가능하다.

배열의 개수와 매개변수 개수가 일치하지 않은 경우

마지막 매개변수에 '...'을 붙여서 전개 연산자로 만들면

남아있는 모든 배열 아이템이 그 매개변수(나머지 매개변수. rest parameter)에

배열의 형태로 들어간다.

 

 

key, value 축약형

객체의 key와 value가 동일할 때, 축약형으로 만들어줄 수 있다.

 

---

 

데이터 불변성(Immutability)

원시형 데이터 : 원시적인/기본적인 데이터. String, Number, Boolean, undefined, null

참조형 데이터 : Object, Array, Function

 

원시형 데이터

사실 데이터가 같은지 비교하는 기준은 어떤 메모리 주소를 바라보는지이다.

데이터의 값은 항상 메모리 주소에 저장이 되는데,

원시형 데이터의 값은 메모리에 이미 존재하는 같은 값이 있으면

같은 메모리 주소를 바라본다.

따라서, 보이는 값이 같으면 같은 메모리 주소를 갖고 있는 똑같은 값이라고 생각하면 된다.

 

 

참조형 데이터

참조형 데이터는 변수에 값을 선언할 때마다 새로운 메모리 주소에 할당한다.

그래서 보기에는 똑같은 값이 다르다는 결괏값 false가 나온다.

산술 연산자 = 로 값을 할당하는 것은,

메모리 주소를 할당한다는 뜻이다. (예. b = a)

주소가 이전되었으니

같은 메모리를 바라보는 데이터 중 하나를 수정하면,

모든 변수의 값이 수정된다.

(예. a를 수정하면 b도 같이 수정된다)

-결국 같은 데이터를 수정하게 된다.-

**이것은 주의할 점**

 

---

 

얕은 복사(Shallow copy), 깊은 복사(Deep copy)

 

같은 메모리 주소를 바라보게 되면서 값이 같이 변한다.

같이 변하는 걸 의도하지 않는 경우

데이터를 복사해서 새로운 변수에 할당해서 사용해야 한다.

 

 

얕은 복사(Shallow copy)

복사하는 방법 1

const copyUser = Object.assign({}, user);

Object.assign()을 통해서 복사가 가능하다.

복사를 하면 다른 메모리 주소를 바라본다.

이러면 user의 age는 22, copyUser의 age는 그대로 85가 된다.

 

 

 

복사하는 방법 2

const copyUser = {...user}

스프레드 연산자를 통해서 복사하기

 

 

 

깊은 복사(Deep copy)

(내가 이해하기로)

얕은 복사는, 객체 내부에 있는 다른 참조형 데이터는 복사하지 않는다.

그래서 또다시 문제가 생기는데,

배열도 참조형 데이터

분명히 스프래드로 복사를 해서 copyUser에 할당했다.

그런데 user.emails 배열에 push로 새로운 이메일을 추가해 줬더니

둘 다 똑같다고 나온다.

그래서 깊은 복사로 이런 걸 싹 다 복사해야 한다.

(깊은 복사는 복잡해서 lodash 라이브러리를 사용한다.)

 

lodash를 npm으로 설치하고 불러와서

_.cloneDeep(복사할객체)

lodash가 제공하는 cloneDeep이라는 메서드로 아주 간편하게 복사한다.

그러면 이렇게 배열 데이터도 복사가 돼서,

같이 변화하지 않는 게 보인다!

🎉

 

 

참조 데이터 안에 또 다른 참조 데이터가 있다면 깊은 복사를,
그렇지 않으면 얕은 복사를 하면 된다.