[React] 7 JavaScript개념 정리(객체 Object)

선생님도 리액트를 가르쳐주시다가 이렇게 부실한 자바스크립트 베이스로는 진도를 나가기가 힘들다고 판단하셨는지 오늘은 자바스크립트의 클래스와 객체에대한 복습을 했다. 오랜만에 들어도 또 새로운 것 같은 느낌...

 

객체 object
물리적으로 존재하거나 추상적으로 생각할 수 있는 것 중에서 속성을
가지고 있고 다른 것과 식별 가능한 것

-> 이름(key)과 값(value)으로 구성된 속성의 집합이다.

ex)

귀여운 고영희씨

이 귀여운 고양이를 객체로 만들어서 나타내보자

고양이 - 객체
속성(property)
cat.name = "고영희"
cat.family = "코리안 숏 헤어"
cat.age = 2
cat.weight = 1000

 

cat = {

    name:"고영희",

    family:"코리안 숏 헤어",

    age:2,

   weight:1000

}

이게 이 고양이라는 객체를 나타내주는 것이다. 

 

메서드(method)  // 속성의 값이 함수인 속성 // 객체에서 사용하는 함수
cat.eat( ) 
cat.sleep( )
cat.play( )

 

이런 식으로 객체에 함수를 넣어서 사용하는 것을 메서드 라고 한다.

cat = {
   name:"고영희",
   family:"코리안 숏 헤어",
   age:2,
   weight:1000,
   eat( ){ 맛있게먹는다},
   sleep( ) { 잔다 },
   play( ){ 움직인다 }
}

 

 

객체를 만드는 방법은 객체 리터럴 문법과 객체 생성자 문법이 있다.

 

객체 리터럴 문법
let cat = { };

 

객체 생성자 문법
let cat = new Object( );

 

또는 객체를 만드는 함수를 만들어서 객체를 만들어줄 수도 있다

function makeUser(name,age){
	return{
       // 단축프로퍼티 키의문자와 변수명이같을때 줄일수잇음
       name, // name: name,
       age   // age:age
    }
}

let user = makeUser("green",30)

name과 age를 파라미터로 받아서 객체로 리턴해주는 함수이다.  

 

객체의 키값에 변수를 넣는 방법 

let keyname = "weight"

let cat = {
	name:"고영희",
 	age:3,
	[ keyname ] : 2000
}

key값에 변수를 넣는법

 

객체의 속성값에 접근하는 방법

객체의 value 값은 객체이름과 key값으로 접근할 수 있다

cat 객체의 이름에 접근하려면 

1.  cat.name
2.  cat['name']

3.  let aa="name"
 	cat[aa]

이렇게 3가지 방법으로 접근할 수 있다 

1.을 찍고 키값으로 접근하거나

2  대괄호 안에 키값을 넣어서 접근하거나 

3  대괄호안에 변수를 넣어서 접근할 수 있다. (변수를 사용할 때는 대괄호로만 접근할 수 있다.)

 

 

 

선언한 객체에 값을 추가하는 방법

let keyname = "weight"

let cat = {
	name:"고영희",
 	age:3,
	[ keyname ] : 2000
}

cat.age = 4
cat.favorite = "츄르"

 

이렇게 객체를 선언한 후에 객체에 키값으로 접근해서 값을 수정하거나

객체에 없는 키값에 값을 넣어서 저장할 수도 있다.

객체의 값 수정과 추가

 

객체에 키값이 있는지 확인

let user = {
	name:"colazoa",
    age: 50/2
}

console.log("name" in user) // true
console.log("weight" in user) // false

콘솔에서 확인

객체 반복문 (객체의 모든 키값을 순회)

for(key in user){                 //user객체의 키를 하나씩 key변수에 대입하는 반복
       console.log(key)
       console.log(user[key]);
}

객체의 키값을 콘솔에 로그 해주고.

객체에 키값으로 접근해서 value를 콘솔에 출력해 준다.

 

객체의 복사

객체의 변수에는 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어 있는 '메모리 주소’인 객체에 대한 '참조 값’이 저장 되게 된다.

let user1={
	name="colazoa"
}

예를 들어 이렇게 한 개의 객체를 생성하면 객체는 메모리 내 어딘가에 저장되고,

변수 user1에는 객체를  '참조’ 할 수 있는 값이 저장되게 된다.객체가 할당된 변수를 복사할 때에는

객체의 참조 값이 복사되고 객체자체는 복사되지 않는다.

객체는 하나이고 참조하는 변수가 2개가 되는 것이다.

 

하나의 객체를 참조하는 두 변수 user1 , seconduser

let user1={
	name="colazoa"
}
let seconduser = user1

https://ko.javascript.info/object-copy

이런 느낌이 되는 것이다. 

이 상태에서 user1의 name을 바꾸면 같은 객체를 참조하는 seconduser에서의 name 값도 바뀌는 것이다.

 

콘솔 창에서 쳐보면 알 수 있듯이 처음에 colazoa라는 name을 가진 user1을 seconduser에 복사했다

user1과 seconduser 모두  name 값으로 "colazoa"를 가지고 있다.

user1에서 name을 Ciderzoa로 수정하자 같은 객체를 참조하는

seconduser도 name값이 바뀐 것을 확인할 수 있다.

 

이런 문제를 방지하기 위해서는 복사할 때 똑같은 객체를 다른 메모리에 하나 더 저장해주어야 한다.

 

같은 객체를 생성하는 방법

//객체 반복문을 이용한 방법
let seconduser = {}
for(let key in user){
	seconduser[key] = student1[key]
}  

//스프레드 구문을이용한방법
let seconduser = {
	...user1,
}

새로운 객체를 만들고 객체 안에 복사할 객체의 속성들을

어떤 방법으로든 똑같이 넣어서 같은 구조의 객체를 만들어주면 된다. 이렇게 해주면 한쪽의 값이 수정되어도 다른 쪽에서 참조하거나 하는 영향이 없기 때문에 각각 사용이 가능하다.

 

자바스크립트를 배웠을 때에는 뛰어넘었던 내용들도 있는데 아무래도 리액트에 객체형태가 자주 나오다 보니 객체를 제대로 다룰 수 있어야 리액트를 사용할 때 큰 문제가 없는 듯하다..