✍️ 팀 과제!!

<aside> ⚠️ 입문 주차는 1-1 ~ 3-6강, 5-6 ~ 5-8강 내용을 기준으로 합니다. 🙂

</aside>

<aside> 🔐 자바스크립트에서 유사배열과 배열의 차이는 무엇일까요? 유사배열의 각 요소를 수정하고 싶다면 어떤 과정을 거쳐야할까

</aside>

유사 배열 (Array-like object)

배열처럼 보이지만 사실 key가 숫자이고 length라는 속성을 가지고 있는 객체를 말하며, array[0], array[1], array.length와 같은 것을 활용할 수 있지만, 배열에 사용되는 메소드들은 사용할 수 없습니다. 따라서 어떤 함수에서 실행 결과로 배열값을 돌려주고 싶을때, 혹은 원래의 배열 객체가 가지고 있는 메소드를 제공하고 싶지 않거나 원래의 배열 객체에 없는 기능을 제공하고 싶을 때 사용합니다.

array_like = 
{
	0: 'a', //index가 array와 같이 0부터 시작하며, key 가 숫자
	1: 'b',
	2: 'c',
	length: 3 //length 값
};

array_like.map((a, i) => console.log(a))
// Uncaught TypeError: array_like.map is not a function

따라서 유사배열의 요소를 수정하고 싶다면,

1. Array.from() 메소드를 사용하여 새로운 Array를 만들고, Array 메소드를 사용하여 각 요소를 수정하고 새로운 Array 에 담는다.

const arr = Array.from(array_like).map((a, i) => a + "b")
console.log(arr)
// 출력값: ['ab', 'bb', 'cb']

or

2. Prototype 을 사용

function array_like () {
	this[0] = 'a';
	this[1] = 'b';
	this[2] = 'c';
	this.length = 3;
}

array_like.prototype.map = [].map;
var ex = new array_like();

console.log(ex.map((a, i) => a + "b"))
// 출력값: ['ab', 'bb', 'cb']

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

</aside>

• 컴포넌트가 업데이트 되는 경우는 4가지의 경우가 있습니다.

1. props가 바뀔 때 / 2. state가 바뀔 때 / 3. 부모 컴포넌트가 업데이트 되었을 때(리렌더링) / 4.강제 업데이트

• 위의 경우에는 ‘3. 부모 컴포넌트가 업데이트 되었을 때’ 의 경우 입니다.
• 그래서 변경된 값이 화면에 보여지게 됩니다.
• **‘2. state가 바뀔 때’**는 부모의 값이 바뀐 것이 아닌 자신의 값이 직접 변경됐을 경우에 해당합니다.

<aside> 🔐 양방향 바인딩은 무엇일까요? 양방향 바인딩을 사용하는 경우 리렌더링이 어떻게 이루어질 지 그려보세요. (부모 컴포넌트 A와 자식 컴포넌트 B가 있음을 가정하고 그려봅시다.)

</aside>

양방향 바인딩