6. [ReactJS] map() 함수로 Array형 State 다루기

map()

map()은 JavaScript 배열에서 사용되는 메서드로, 배열의 각 요소를 순회하면서 각 요소에 대해 지정된 동작을 수행하고 그 결과를 새로운 배열로 반환합니다. map()은 원본 배열을 변경하지 않고 새로운 배열을 생성합니다.

 

array.map((currentValue, index, array) => {
  // 동작 수행
  return transformedValue;
});

map()은 주어진 함수를 배열의 각 요소에 대해 순차적으로 호출하고, 각 요소에 대해 함수의 반환 값을 새로운 배열에 저장합니다. 그리고 최종적으로 새로운 배열을 반환합니다.

• array: map()을 호출하는 배열 자체입니다.
• currentValue: 배열의 현재 요소 값입니다.
• index (선택 사항): 배열의 현재 요소의 인덱스입니다.
• array (선택 사항): map()을 호출한 배열 자체입니다.

---

 숫자 배열의 각 요소를 2배로 만들어 새로운 배열을 생성하는 예제.

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

const doubledNumbers = numbers.map((number) => {
  return number * 2;
});

console.log(doubledNumbers); // [2, 4, 6, 8, 10]

위 예제에서 map()을 사용하여 numbers 배열의 각 요소를 2배로 만들어 doubledNumbers라는 새로운 배열을 생성했습니다.

---

ReactJS에서 map() 과 Array형 State 활용하기.

• 아래 예제는 React의 State를 활용하고, Array 형태의 State를 사용하여 요소에 State 값을 노출시키고 삭제하는 기능을 가진 예제입니다.
• 아래 예제를 사용하면 초기 상태로 "Apple", "Banana", "Orange"가 포함된 과일 목록이 화면에 표시됩니다. 사용자가 "Delete" 버튼을 클릭하여 과일을 삭제하면 해당 과일이 목록에서 사라지고, 화면이 업데이트되어 변경 내용이 표시됩니다.

import React, { useState } from "react";

function FruitList() {
  const [fruits, setFruits] = useState(["Apple", "Banana", "Orange"]);

  const deleteFruit = (index) => {
    const updatedFruits = [...fruits];
    updatedFruits.splice(index, 1);
    setFruits(updatedFruits);
  };

  return (
    <div>
      <h1>Fruit List</h1>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>
            {fruit}
            <button onClick={() => deleteFruit(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

 

1. FruitList 컴포넌트에서 useState 훅을 사용하여 fruits라는 배열 형태의 State를 선언하고 초기값으로 ["Apple", "Banana", "Orange"]를 설정합니다.
   
   
2. deleteFruit 함수는 인덱스를 매개변수로 받아와 해당 인덱스에 위치한 과일을 삭제하는 역할을 합니다. 함수 내부에서는 fruits 배열을 복사한 후, splice() 메서드를 사용하여 해당 인덱스의 아이템을 삭제합니다. 그리고 setFruits 함수를 사용하여 fruits State를 업데이트합니다.
   
   
3. <ul> 요소 내부에서 fruits.map() 메서드를 사용하여 fruits 배열을 순회하며 각 과일을 <li> 요소로 변환하여 출력합니다. 각 <li> 요소는 key 속성에 인덱스를 지정하여 고유한 식별자를 제공합니다.
   
   
4. 각 <li> 요소 안에는 과일의 이름이 표시되고, 삭제 가능한 버튼인 "Delete" 버튼이 포함되어 있습니다. "Delete" 버튼은 onClick 이벤트를 통해 deleteFruit 함수를 호출하며, 해당 과일의 인덱스를 매개변수로 전달합니다.
   
   
5. 사용자가 "Delete" 버튼을 클릭하면 해당 과일이 삭제되고, fruits State가 업데이트되어 화면이 자동으로 업데이트됩니다.

map()으로 Array형 State를 이용하여 만든 예제