<aside> 🔐 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까요?
</aside>
**유사 배열 객체(Array-like object)**은 말그대로 배열 같은 특성을 가진 객체입니다. 유사배열이라고 인정하는 기준은 1. key 값이 0 부터 순차적으로 올라가며, 연속되어야 한다, 2. length property를 가져야한다는 것입니다.
배열처럼 연속된 숫자 인덱스를 프로퍼티 키로 가지기 때문에 for문으로 순회해서 프로퍼티 값에 접근할 수 있지만, for...of문으로 순회할 수는 없습니다. 유사 배열 객체는 이터러블이 아닌 일반 객체이므로 Symbol.iterator 메서드가 없기 때문입니다. 단, 함수의 arguments, HTMLCollection, NodeList는 유사 배열 객체이면서 이터러블입니다 (ES6).
유사배열을 사용하는 목적은 배열처럼 관리하고 싶지만 배열의 prototype을 상속받고 싶지 않을 때, 즉 배열 메서드를 사용하지 못하게 하여 실수를 방지하기 위해서 입니다.
유사배열을 배열처럼 사용하려면 call, apply, bind 를 호출하여 this를 바꾸거나, 또는 spread 연산자 ... 나 Array.from 을 통해 배열로 얕은 복사해서 사용할 수 있습니다. Array.from 메서드는 유사 배열 객체 또는 이터러블을 인수로 전달받아 배열로 변환해서 반환합니다.
// 유사 배열 객체
const arrayLike = {
0: 'zero',
1: 'one',
2: 'two',
length: 3
};
// Array.from은 유사 배열 객체 또는 이터러블을 배열로 변환한다.
const arr = Array.from(arrayLike);
console.log(arr); // [zero, one, two]
Reference >
<aside> 🔐 부모 컴포넌트 A와 자식 컴포넌트 B가 있습니다. 컴포넌트 A는 state로 {name: "르탄이"}를 가지고 있고, 자식인 컴포넌트 B에게 name 값을 넘겨주었습니다. 컴포넌트 B는 받아온 name을 화면에 뿌려주고 있습니다. 컴포넌트 A의 state가 {name: "진도사우르스"}로 바뀌었을 때, 어떤 과정을 거쳐 바뀐 값을 화면에 보여주는 지 라이프 사이클 흐름을 그려볼까요?
</aside>
constructorrendercomponentDidMountgetDerivedStateFromPropsshouldComponentUpdaterendergetSnapshotBeforeUpdatecomponentDidUpdate