내일배움캠프 React트랙 36일차 회고 (2022.12.20)

Q.여기 써있는 filters.map의 인자 value, index는 개발자의 임의인자인가, built-in인자인가..?

filters.map((value, index)

map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듭니다. callback 함수는 (undefined도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됩니다. 즉, 값이 삭제되거나 아직 값이 할당/정의되지 않은 인덱스에 대해서는 호출되지 않습니다.callback 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 map을 호출한 원본 배열 3개의 인수를 전달받습니다. 
from MDN

핵심이 되는 문장은 "callback 함수는 호출될 때 대상 요소의 값, 그 요소의 인덱스, 그리고 map을 호출한 원본 배열 3개의 인수를 전달받습니다."이다. 즉, 저 자리에 value와 index를 써줘서 배열의 value와 index를 가져온 것이 아니라, 원래 저 자리에 무엇을 써주든 value와 index 그리고 원본 배열이 받아져 온다. 

const filters = ["all", "active", "completed"];
filters.map((value, p, u) => console.log(value, p, u));
// all 0 [ 'all', 'active', 'completed' ]
// active 1 [ 'all', 'active', 'completed' ]
// completed 2 [ 'all', 'active', 'completed' ]

p와 u는 각각 index자리와 원본배열자리에 들어있는 인자이기때문에 저러한 출력값을 받을 수 있는 것이다.

---

useReducer함수로 투두리스트의 all, active, completed버튼을 구현하려했는데 filter함수를 썻음에도 setState함수처럼 

기존의 배열에 저장이 돼서 구현이 잘 안됐다. 내일 React공식문서를 참고해 이유를 좀 찾아볼 예정이다.