[TIL] React에서 map, filter로 문제풀어보기

 

 

 

 

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아서 새로운 결과를 반환한다.

 

 

 

const students = [
		{ name: 'Alice', age: 17, grade: 'A' },
		{ name: 'Bob', age: 18, grade: 'B' },
		{ name: 'Charlie', age: 16, grade: 'C' },
		{ name: 'Diana', age: 19, grade: 'D' },
	];

// TODO: filter를 사용하여 18세 이상의 학생들만 선택해주세요.

const filteredArr = students.filter((student, index) => student.age >= 18);

// TODO: 학생이름을 클릭하면 나이와 점수가 alert 돼야한다.
 {filteredStudents = students.map((student) => (
 	<li key={index}>
    	<button onClick={() => alert(`나이: ${student.age}, 점수: ${student.grade}`)}></button>
    </li> ))}

 

 

 

 

map() 메서드 안에는 callback함수가 들어간다. 

배열 array에 있는 요소(num)들에 함수를 실행하고 나온 값(num * num)을 저장하여 새로운 배열(mapArray)로 만든다.

배열을 렌더링할 때, 각 요소에 고유한 식별자인 `key` prop을 제공하는 것이 권장된다.

`key` prop 은 배열의 각 요소에 고유해야하며, 변하지 않는 값을 사용하는 것이 좋다. 

 

여기서는 index를 key로 사용했지만, 사실 key보다는 고유한 ID값이 있다면 그 ID를 key로 사용하는 것이 더 좋다.