Array 프로토타입의 메소드

React

Array 프로토타입의 메소드

cheon seung hyeon 2024. 9. 24. 14:45

리액트에서 자주 사용되는 Array.prototype의 메서드들은 주로 상태 관리나 렌더링에 영향을 주는 배열 조작과 관련된 메서드들입니다.

map()

설명: 배열의 각 요소에 대해 함수를 실행하여, 그 결과를 새로운 배열로 반환합니다. 리액트에서는 리스트를 렌더링할 때 매우 자주 사용됩니다.

const items = ['Apple', 'Banana', 'Cherry'];
const itemList = items.map((item, index) => <li key={index}>{item}</li>);

// 리액트 컴포넌트에서 렌더링
return <ul>{itemList}</ul>;

리액트 활용: map()을 사용해 컴포넌트 리스트를 생성하여 렌더링할 수 있습니다. key 속성을 사용해 각 요소의 고유성을 지정하는 것도 중요합니다.

filter()
- 설명: 배열의 각 요소에 대해 조건을 검사하여, 조건을 만족하는 요소들만 모아 새로운 배열로 반환합니다.
- 사용 예시

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

// 리액트에서 필터링된 데이터를 렌더링
const evenList = evenNumbers.map(num => <li key={num}>{num}</li>);
return <ul>{evenList}</ul>;

리액트 활용: 조건에 따라 특정 요소를 화면에 표시하거나 숨길 때 사용합니다.

reduce()
- 설명: 배열의 각 요소를 순회하며 누적된 결과를 하나의 값으로 반환합니다. 계산이나 데이터를 하나의 결과로 축약할 때 유용합니다.
- 사용 예시:

const prices = [10, 20, 30];
const total = prices.reduce((acc, price) => acc + price, 0); // 60

return <p>Total Price: {total}</p>;

리액트 활용: 총합, 평균 등 데이터를 하나의 값으로 축약하여 표시할 때 사용됩니다.

find()
- 설명: 조건을 만족하는 첫 번째 요소를 반환합니다. 요소를 찾지 못하면 undefined를 반환합니다.
사용 예시:

const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];
const user = users.find(user => user.id === 2);

return <div>User: {user ? user.name : 'Not Found'}</div>;

- 리액트 활용: 특정 조건에 맞는 데이터를 검색하여 화면에 표시할 때 사용됩니다.
some() & every()
- 설명: some()은 배열에 조건을 만족하는 요소가 하나라도 있으면 true를 반환합니다. every()는 모든 요소가 조건을 만족해야 true를 반환합니다.
사용 예시:

const numbers = [1, 2, 3, 4];
const hasEven = numbers.some(num => num % 2 === 0); // true

return <p>{hasEven ? 'Has even numbers' : 'All odd numbers'}</p>;

- 리액트 활용: 조건에 따라 UI를 다르게 표시하거나 검증할 때 유용합니다.
includes()
- 설명: 배열에 특정 값이 포함되어 있는지 확인하고 true 또는 false를 반환합니다.
사용 예시:

const fruits = ['apple', 'banana', 'cherry'];
const hasBanana = fruits.includes('banana'); // true

return <p>{hasBanana ? 'We have bananas!' : 'No bananas available.'}</p>;

- 리액트 활용: 특정 값이 배열에 존재하는지 확인하고 조건에 따라 다른 UI를 표시할 때 사용합니다.
sort()
- 설명: 배열의 요소를 정렬합니다. 원본 배열이 변경되므로 사용할 때 주의해야 합니다.
사용 예시:

const numbers = [3, 1, 4, 1, 5];
const sortedNumbers = [...numbers].sort((a, b) => a - b); // [1, 1, 3, 4, 5]

return <ul>{sortedNumbers.map((num, index) => <li key={index}>{num}</li>)}</ul>;

- 리액트 활용: 데이터를 정렬하여 보여줄 때 사용되며, 정렬 기준에 따라 UI가 달라질 수 있습니다.
concat()
- 설명: 두 개 이상의 배열을 합쳐 새로운 배열을 반환합니다.
사용 예시:

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = arr1.concat(arr2); // [1, 2, 3, 4]

return <ul>{combined.map((num, index) => <li key={index}>{num}</li>)}</ul>;

- 리액트 활용: 여러 데이터를 결합하여 하나의 리스트로 표시할 때 유용합니다.
concat()
- 설명: 두 개 이상의 배열을 합쳐 새로운 배열을 반환합니다.

forEach는 자바스크립트의 Array.prototype에 있는 메서드로, 배열의 각 요소를 순회하면서 주어진 함수를 실행하는 메서드입니다. forEach는 배열의 모든 요소에 대해 한 번씩 함수를 호출하며, 이때 요소의 값, 인덱스, 그리고 배열 자체를 인수로 전달받을 수 있습니다.

forEach의 특징

배열의 각 요소에 대해 주어진 콜백 함수를 실행합니다.
반환값이 없습니다. forEach는 단순히 배열을 순회하며 작업을 수행할 뿐, 새로운 배열이나 값은 반환하지 않습니다.
비동기 처리를 하지 않습니다. forEach는 순차적으로 동기적으로 실행되며, 각 콜백이 끝난 후 다음 요소로 이동합니다.
원본 배열을 변경할 수 있습니다. 콜백 함수 내부에서 배열의 요소를 직접 변경하면 원본 배열도 변경됩니다.

const fruits = ['apple', 'banana', 'cherry'];

fruits.forEach((fruit, index, array) => {
  console.log(`Fruit: ${fruit}, Index: ${index}, Array: ${array}`);
});

콜백 함수 매개변수

첫 번째 매개변수 (number): 현재 순회 중인 배열의 요소 값입니다.
두 번째 매개변수 (index): 현재 요소의 인덱스입니다.
세 번째 매개변수 (array): forEach가 호출된 원본 배열입니다.

매개 변수의 개수에 따라 해당하는 매개변수 값이 설정된다

forEach와 다른 메서드(map, filter)와의 차이점

forEach vs map:
- forEach는 반환값이 없고 단순히 배열을 순회하며 작업을 수행합니다.
- map은 배열의 각 요소를 변환한 결과를 새로운 배열로 반환합니다.
forEach vs filter:
- forEach는 단순히 배열을 순회하며 주어진 작업을 수행할 뿐, 반환값이 없습니다.
- filter는 조건을 만족하는 요소만으로 새로운 배열을 반환합니다.

주의할 점

반환값이 없다:
- forEach는 작업을 수행하기 위한 용도로 사용하며, 값을 반환하지 않으므로 배열 변환이나 값을 얻기 위한 목적에는 적합하지 않습니다.
break나 continue 사용 불가:
- forEach는 중간에 반복을 멈출 수 없습니다. break나 continue를 사용할 수 없기 때문에, 반복을 멈추고 싶다면 for문이나 some, every 등을 사용해야 합니다.
비동기 작업과 사용 시 주의:
- forEach는 비동기 작업과 잘 어울리지 않으며, await와 함께 사용해도 각 반복이 비동기적으로 실행되지 않고, 순차적으로 실행됩니다. 이런 경우에는 for...of 루프를 사용하는 것이 더 적합합니다.