map, filter

for문 보다 더 많이 쓰이는 반복문 형태이다. 둘다 배열의 내장함수이기 때문에 배열과 함께 사용해야 한다.

1) map

const aaa =  ['원소1', '원소2', '원소3']
aaa.map((el) => (el + "은 aaa의 원소입니다."))

map 안에있는 el은 aaa의 원소들이 들어갈 매개변수이므로, 네이밍은 본인 맘대로 하면된다.

const RenderMap = ()=>{
const classmate = ["철수","영희","훈이"]
return(
{classmate.map( (item)=> <div>{item}어린이</div> )}
		) 
	}
export default RenderMap

위의 코드처럼 html에서도 적용이 가능하다.

2) filter

단어 그대로 특정 조건에 맞는 원소들만 필터링하는 배열의 내장함수이다.

const num = [1,2,3,4,5,6,7,8,9,10]
num.filter((item)=>(item<=8))
=> (8) [1, 2, 3, 4, 5, 6, 7, 8]

배열의 원소 중 8 이하인 원소들만 모은 배열이 결과 값으로 나온 것을 볼 수 있다.

map 사용시 주의사항

import { Test } from '../../src/test2';

export default function Test2() {
	const List = ['사과', '딸기', '바나나'];

	return (
		<>
			{List.map((data) => (
				<Test>{data}</Test>
			))}
		</>
	);
}

위의 예시처럼 key값을 부여하지 않았을 때, 아래처럼 오류가 발생한다.

해당 경고는 React가 어떤 요소를 변경, 추가, 삭제할지 식별하기 위함인데,

key가 없는 경우에는 가상 DOM을 비교하는 과정에서 순차적으로 비교하며 변화를 감지한다.

key가 있다면, 이 값을 사용하여 어떤 것이 수정이 됐는지 빠르게 감지할 수 있다.

위의 설명을 짧게 보충한다면, React에서는 기존 데이터와 바뀐 데이터를 비교하여 바뀐 부분을 화면에 그려줍니다.

여기서 비교할 때 고유한 Key값이 없다면 모든 데이터를 비교해야 하지만, Key가 있으면 Key값만 비교하여 Key가 추가 됐는지, 삭제 됐는지만 비교하여 불필요한 비교나 렌더링을 없애준다.

그러기 위해 key는 안정적인 고유성을 부여하기 위해 중복되는 값이 아닌 것으로 지정해줘야 한다. 보통 Id를 키값으로 준다.(안겹치니까)

every

every()는 배열안의 모든요소가 주어진 판별 함수를 통과하는지 테스트하는 메소드이다.
(빈 배열에선 무조건 true를 반환한다)

ex)

const aaa = (x) => x < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(aaa));
// 결과값: true

배열 내 단 하나의 요소라도 false일경우, every 함수는 false를 반한한다.