[React] 배열에 대하여

🎯 들어가며

배열이란 무엇일까? 뭔가 잘 알고 있는 것 같으면서도 사실은 제대로 모르는 부분인 것 같다. 배열 자체의 특성도 잘 모르고 관련된 함수에 대해서도 잘 모르는 부분이 많다. 그래서 오늘은 배열에 대해 알아볼 것이다.

---

📌 React에서 배열의 특징

✍ 불변성을 유지해야 한다!

• React에서 상태를 변경할 때 기존 배열을 직접 수정하게 되면 리렌더링이 발생하지 않는다.
• 따라서 여러 배열 관련 함수들을 사용하여 새로운 배열을 만들어 업데이트를 해야 한다.

💻 예시

const [numbers, setNumbers] = useState([1, 2, 3]);

// 잘못된 방법: 기존 배열을 직접 수정
numbers.push(4);
setNumbers(numbers);  // 상태 변경 감지가 안됨!

// 올바른 방법: 새로운 배열을 생성하여 업데이트
setNumbers([...numbers, 4]);

❗위의 예시처럼 기존 배열을 직접 수정하지 않고 새로운 배열을 만들어 설정해야 한다.

✍ 위와 같은 방식이 spread 연산자를 사용하여 새로운 배열을 생성한 것이다!!!

---

📌 배열 관련 함수 총정리

👍 각 배열 함수의 기본 문법, 사용 이유, 예제를 포함하여 정리하겠다.

---

📋 배열을 변형하는 함수

• map()
• filter()
• reduce()
• sort() / reverse()

🚩 map()

✍ 배열 요소를 변환하여 새로운 배열을 생성한다.

const newArray = array.map((element, index, array) => 새로운값);

❓사용 이유
1. 배열을 변형할 때 사용한다.
2. JSX 리스트를 렌더링할 때 가장 많이 사용된다.

💻 데이터를 변형하여 렌더링하는 예시

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];

const UserList = () => (
  <ul>
    {users.map(user => (
      <li key={user.id}>{user.name.toUpperCase()}</li> // 변형: 대문자로 변환
    ))}
  </ul>
);

💻 새로운 속성을 추가하여 변형한 배열 예시

const products = [
  { id: 1, name: "Laptop", price: 1000 },
  { id: 2, name: "Phone", price: 500 }
];
// map() 함수를 사용해 새로운 배열 생성
const updatedProducts = products.map(product => ({
  ...product,
  priceWithTax: product.price * 1.1 // 가격에 세금 추가
}));

console.log(updatedProducts); 
/*
[
  { id: 1, name: "Laptop", price: 1000, priceWithTax: 1100 },
  { id: 2, name: "Phone", price: 500, priceWithTax: 550 }
]
*/

❗key 속성을 추가해야 성능 최적화가 가능하다.

🚩 filter()

✍ 특정 조건을 만족하는 요소만 포함하는 배열을 생성한다.

const newArray = array.filter(element => 조건);

❓사용 이유 : 배열에서 특정 요소를 제거하거나 필요한 요소만 남길 때 사용한다.

💻 특정 항목 삭제 예시

const [items, setItems] = useState(["Apple", "Banana", "Cherry"]);

const removeItem = (itemToRemove) => {
  setItems(items.filter(item => item !== itemToRemove));
};

🚩 reduce()

✍ 배열을 하나의 값으로 축소한다.

const result = array.reduce((acc, cur) => 새로운_누적값, 초기값);

❓사용 이유 : 합계, 평균, 데이터 그룹핑 등 누적된 값을 계산할 때 사용한다.

💻 총합 계산 예시

const cart = [
  { name: "Apple", price: 1000 },
  { name: "Banana", price: 500 },
  { name: "Orange", price: 1500 }
];

const totalPrice = cart.reduce((sum, item) => sum + item.price, 0);
console.log(totalPrice); // 3000

🚩 sort() 와 reverse()

✍ sort() : 배열을 오름차순 또는 내림차순으로 정렬한다.

array.sort((a, b) => a - b); // 오름차순
array.sort((a, b) => b - a); // 내림차순

✍ reverse() : 배열을 반대로 정렬한다. 배열의 순서를 거꾸로 뒤집는다.

array.reverse();

❗reverse()는 원본 배열을 변경하기 때문에 그대로 사용하면 불변성을 유지할 수 없다. 따라서 안전하게 사용해야 한다.

💻 안전하게 사용하는 예시

const items = ["A", "B", "C"];
const reversedItems = [...items].reverse(); // 원본 변경 X

---

📋 배열을 검색하는 함수

• find() / findIndex()
• some() / every()

🚩 find() 와 findIndex()

✍ find() : 조건을 만족하는 첫 번째 요소를 반환한다.

const result = array.find(element => 조건);

💻 사용 예시

const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];

const user = users.find(user => user.id === 2);
console.log(user); // { id: 2, name: "Bob" }

✍ findIndex() : 조건을 만족하는 첫 번째 요소의 인덱스를 반환한다.

💻 사용 예시

const numbers = [10, 20, 30, 40];
const index = numbers.findIndex(num => num === 30);
console.log(index); // 2

🚩 some() 과 every()

✍ 특정 조건을 검사하는 함수이다. Boolean값을 반환한다.

💻 사용 예시

const scores = [80, 90, 100];

console.log(scores.some(score => score < 50));  // false
console.log(scores.every(score => score >= 80)); // true

---

📋 배열을 수정하는 함수

❗아래 함수들은 배열의 내용을 직접 변경하는 함수들이며 React에서 사용 시 주의해서 사용해야 한다.

함수	설명
push()	배열 끝에 요소 추가
pop()	마지막 요소 제거
shift()	첫 번째 요소 제거
unshift()	첫 번째 위치에 요소 추가
splice()	특정 위치에서 요소 추가/삭제

💡원본 배열을 변경하지 않도록 slice() 또는 spread 연산자([...])를 사용하는 것이 좋다.

---

📋 배열을 복사하는 함수

✍ React에서는 상태 변경 시 불변성을 유지하기 위해 배열을 복사해야 한다.

함수	설명
slice()	배열의 일부를 복사
concat()	두 배열을 합쳐 새로운 배열 생성
flat()	다차원 배열을 1차원으로 평탄화

💡slice()는 reverse(), sort()와 함께 사용하면 원본 배열을 안전하게 유지 할 수 있다.

🚩 slice()

✍ 배열의 일부를 복사하여 새로운 배열을 반환한다.

const newArray = array.slice(startIndex, endIndex);

❓사용 이유 : 원본 배열을 변경하지 않고 일부 요소를 추출할 때 사용한다.

💻 사용 예시

const numbers = [1, 2, 3, 4, 5];
const newNumbers = numbers.slice(1, 4); // index 1 ~ 3 (4는 포함X)
console.log(newNumbers); // [2, 3, 4]

💻 reverse와 함꼐 사용하는 예시 (원본 유지)

const numbers = [1, 2, 3, 4, 5];

// 새로운 배열을 생성
const reversedNumbers = numbers.slice().reverse(); // 원본 유지
console.log(numbers); // [1, 2, 3, 4, 5] (원본 배열 변경 X)
console.log(reversedNumbers); // [5, 4, 3, 2, 1]

---

😄 마치며

이렇게 배열과 관련하여 정리를 해보았다. 실제 프로젝트를 하면서도 여러 로직들에 배열 관련 함수들이 많이 적용된다. 간단하게만 정리를 해봤는데 앞으로 실제 사용을 해보며 기록하고 싶은 내용이 있다면 자세히 기록해봐야지~!!