Array의 map / filter

Array 객체 내에서 각각의 객체를 활용하여 새 객체로 만드는 경우에 자주 사용하는 함수

Array.prototype.map()

const originArray = [1, 2, 3];
const convertArray = originArray.map(ele => ele * 2);

console.log(convertArray);
// [2, 4, 6]

Array를 훑을 때 for문을 줄일 수 있는 장점이 있음.

단, 화살표 함수가 몸에 베어야 쓰기 편하다는 점이 있음. (물론 컬리 브레이스로 return 을 줄 수 있지만 함수가 복잡하지 않다면 화살표 함수가 직관적이고 합리적)

특정 객체의 배열에서 객체 내의 값을 빼와서 별도 배열로 만들 때에도 유용하게 쓰인다.

const objectArray = [
	{key : 'value1'},
	{key : 'value2'},
	{key : 'value3'},
	{key : 'value4'},
	{key : 'value5'},
];

const valueArray = objectArray.map(ele => ele['key']);

console.log(valueArray);
// ["value1", "value2", "value3", "value4", "value5"]

Array.prototype.filter()

const originArray = [1, 2, 3];
const filteredArray = originArray.filter(ele => ele >= 2);

console.log(filteredArray);
// [2, 3];

map과 사용방법은 유사하지만, return 되는 값이 bool 형태이어야 한다는 점과, true인 결과만 배열로 담아 새 배열로 만드는 것이 차이점.

JSX's key

React의 모든 JSX객체는 옵션으로 key값을 가질 수 있으며, 효율적인 Component의 생산과 상태의 관리를 위해 부여하는 것이 좋다.

단, ID 객체의 특성 상 중복되는 값이 없어야 한다.