한 입 크기로 잘라먹는 리액트 / 10강 - 객체

Onebite

https://github.com/winterlood/onebite-react-v2/blob/main/section01/chapter15.js

onebite-react-v2/section01/chapter15.js at main · winterlood/onebite-react-v2

https://github.com/winterlood/onebite-react-v2/blob/main/section01/chapter16.js

onebite-react-v2/section01/chapter16.js at main · winterlood/onebite-react-v2

 

1. 객체 생성

const user = {
name: "이정환",
age: 27,
isAdmin: true,
};

console.log(user.name); // "이정환"
console.log(user["age"]); // 27

• .(점) 또는 [](대괄호)로  값 접근 가능
• key는 문자열로 자동 변환됨

2. 객체 수정 & 추가

user.age = 30; // 값 수정
user.email = "test@naver.com"; // 새 속성 추가
console.log(user.age); // 30

• 존재하지 않는 key를 새로 지정하면 자동으로 추가됨

3. 객체 삭제

delete user.isAdmin;
console.log(user); // { name: "이정환", age: 30, email: "text@naver.com"}

 

4. 객체와 변수의 참조 관계

const a = { value: 10 };
const b = a; // 같은 객체 참조
b.value = 20;

console.log(a.value); // 20

• 객체는 참조형 데이터
• 복사 시, 실제 값이 아니라 메모리 주소를 공유함
  • 즉, a와 b는 같은 객체를 가리키고 있음

5. 객체 복사

const user = { name: "이정환", age: 27 };
const copy = { ...user }; //스프레드 연산자

copy.age = 30;

console.log(user.age); // 27 (원본 유지)
console.log(copy.age); // 30 (복사본 변경)

• ... 스프레드 문법으로 얕은 복사 (shallow copy) 가능
• 중첩 객체가 있을 땐 깊은 복사(deep copy) 필요 (예: structuredClone())

6. 객체 순회 (for...in)

const user = {name: "철수", age: 25, city:"서울"};

for (let key in user) {
 console.log('${key}: ${user[key]}');
}

// name: 철수
// age: 25
// city: 서울

 

이해포인트 정리

• 객체는 데이터를 구조적으로 묶어 관리할 때 사용
• 참조형이기 때문에 복사·수정 시 주의 필요
• 스프레드(...) 문법은 리액트의 props, state 업데이트에서도 핵심

리액트와의 연결

자바스크립트 객체 개념	리액트에서의 활용
{ key:value }	props, state는 모두 객체 형태
user.name	props.title, state.count 등으로 접근
{ ...obj }	불변성 유지 위해 setState({ ...state, key: value })