React | 유사배열객체와 배열의 차이

Jeremy·2022년 10월 12일
0

Q1. 자바스크립트에서 유사배열객체와 배열의 차이는 무엇일까요?

유사 배열 객체는 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고, length 프로퍼티를 갖는 객체를 말한다.

유사 배열 객체는 마치 배열처럼 for문으로 순회할 수도 있다.

(참고자료 : https://www.howdy-mj.me/javascript/array-and-array-like-object-and-iterable/)

하지만 배열처럼 push, pop, join, map과 같은 메서드 사용은 불가하며, 일반 객체처럼 프로퍼티로 접근할 수 없다.

대표적으로 볼 수 있는 유사배열 객체에는 함수의 arguments, HTMLCollection, NodeList가 있다.

여기서 유사배열객체가 가지는 의의를 알 수 있다. 일반 객체가 탐색과 수정등의 과정을 수행하기 위해 유사배열객체로 형태를 갖추는 것이다.

Q2. 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까요?

배열 다루듯 수정하면 된다.

let notarr= {
1:'name',
2:'age',
3:'skills',
length:4
}
console.log(notarr) //{ '0': 'name', '1': 'age', '2': 'skills', length: 3 }

notarr[0] = 'weight'
console.log(notarr) //{ '0': 'name', '1': 'weight', '2': 'skills', length: 3 }

Q3. 부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다. 컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요?

profile
chill~

0개의 댓글