인프런 커뮤니티 질문&답변

1) 첫번째 답변

자바스크립트의 map의 경우 배열을 받아서

그 배열안의 요소들을 하나하나 조작하여 새로운 배열로 리턴하는 메소드입니다.

만약 다음과 같이 객체로 되어 있는 배열인 todos를

let todos = [
	{id: 1, name: todo1},
	{id: 2, name: todo2},
	{id: 3, name: todo3},
]

아래와 같이 map을 이용해 조작한다고 하면

todos = todos.map(todo => {
	if(todo.id === editTodo.id) {
		todo = editTodo
	}
	return todo
})

‘todos.map(todo ‘ 여기의 todo는 순서대로 들어오는 배열안의 객체 하나를 의미합니다. 우선은 id가 1인 객체가 들어오고 다음으로 id가 2인 객체 순으로 배열안의 객체 하나하나를 받을 수 있고

그 들어온 객체를 순차적으로 todo.id 와 editTodo.id의 값을 비교하고 같다면

해당 todo를 그냥 editTodo로 교체하여 리턴해준다고 생각하시면 되겠습니다.

만약 위의 코드를 map이 아닌 이전의 방법으로 조작한다면 아래와 같이 for 문을 이요해 조작하는 것과 같은 결과라고 보시며 되겠습니다.

let newTodos = []
for (var i=0; i < todos.length; i++ ) {
	if(todos[i].id === editTodo.id) {
		todo[i] = editTodo;
	}  
	newTodos.push(todos[i])
}

for를 이용해 객체를 순서대로 받아서 조작 가능 하듯

map도 똑같이 배열의 객체를 순차적으로 받아서 조작한 것입니다.

이부분은 ‘섹션10 기타’에서 ‘배열조작 메소드’ 부분을 들어보시면 좀 더 이해가 되실 것입니다.

2) 두번째 답변

우선 TodoList 컴포넌트에서 문의한 것처럼 {#each fetchTodos as todo} 로 해서 fetchTodos안에 들어있는 객체의 개수만큼 반복이 이루어 집니다.

그리고 fetchTodos안에 들어있는 객체 하나하나가 바로 todo로 명명된 것입니다.

여기에 todo가 TodoItem에 props를 통해서 전달되게 됩니다.

추가로 답변이 필요하시면 알려주세요