.map(), .filter()

.map()과 .filter()는 JavaScript의 배열 메서드로서, 배열의 요소를 변환하거나 필터링하는데 사용

React에서도 주로 사용되며, .map()은 주어진 배열의 각 요소를 변환하고 새로운 배열을 반환하며, .filter()는 주어진 조건을 만족하는 요소만을 선택하여 새로운 배열을 반환

 

1. .map() 메서드

React에서 .map()을 사용하여 배열의 요소를 컴포넌트로 변환하고 리스트를 렌더링하는 것이 일반적

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(num => num * num); // [1, 4, 9, 16, 25]

.map() 메서드는 배열의 각 요소를 특정 함수를 적용하여 새로운 배열을 생성

이 메서드는 원본 배열의 요소를 변경하지 않고, 변환된 값을 가진 새로운 배열을 반환

 

2. .filter() 메서드

React에서 .filter()를 사용하여 배열에서 특정 조건을 만족하는 요소들로 이루어진 새로운 배열을 생성할 수 있음

이를 통해 조건에 맞는 요소들만을 렌더링하는 등의 작업을 수행

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0); // [2, 4]

.filter() 메서드는 주어진 조건을 만족하는 요소들로 새로운 배열을 생성

원본 배열의 요소 중에서 조건을 만족하는 요소만을 선택하여 새로운 배열을 반환

 

참고 : Chat GPT