React : 배열 렌더링을 해보자 !

React에서는 배열을 업데이트 할 때마다 새 배열을 state 설정 함수에 전달해야 한다. React에서 JavaScript 배열 메서드를 사용하여 데이터 배열을 조작할 수 있다. 

	메서드
추가	concat, [...arr] * spread연산자
제거	filter, slice
교체	map
정렬	배열을 복사한 이후 reverse() 및 sort()함수 사용

 

filter(), map(), spread연산자를 이용한 배열 데이터 필터링

filter()의 경우 주어진 필터링 값이 참인 경우의 배열 요소들만으로 새로운 배열을 생성한다. map()의 경우 배열 내의 모든 요소 각각에 대하여 함수를 호출하고, 그 결과를 모아서 새로운 배열을 반환한다. 그리고 spread연산자의 경우 반복이 가능한(iterable) 객체에서 요소를 하나씩 분리한 후에 새롭게 배열을 생성할 수 있다. 

배열을 렌더링할때는 엘리먼트에 안정적인 고유성을 부여하기 위해 key를 지정해야 한다. Key를 통해서 항목을 변경, 추가 또는 삭제할지를 식별할 수 있다. Key에 고유한 값이 없을 경우 map의 index를 활용하여 삽입해도 되지만, 혹시나 index를 사용했을 경우 항목의 순서가 변경될 경우 성능이 저하되는 경우가 있어 주의가 필요하다. 

 

배열 항목 추가

(1) input의 값을 받아서 setFood를 통해서 food를 설정함 

(2) setList함수에 spread연산자를 이용하여 food의 값들을 받을 때마다 렌더링이 될 수 있게 설정함.

(3) 이후 list.map을 통해서 list 배열 내의 모든 요소를 호출하여, <li>태그로 생성함. 

import { useState } from 'react'
import './App.css'

function App() {
  const [food, setFood] = useState("");
  const [list, setList] = useState([]);

  const handleAddList = () => {
    //spread연산자를 이용해서 State 렌더링
    setList([...list, food]);
    setFood("");
  }

  return (
    <div>
      <input type="text" placeholder='좋아하는 음식을 적어주세요' value={food} onChange={(e) => setFood(e.target.value)} />
      <button onClick={handleAddList}>등록</button>
      <ul>
        {list.map((item, index) => <li key={index}>{item}</li>)}
      </ul>
    </div>
  )
}
export default App

 

배열 항목 제거

(1) list.map을 통해 list 배열 내의 모든 요소를 호출하여,  <li> 및 <button>을 생성할 때 index를 버튼 클릭 시 이벤트의 매개변수로 전달함.

(2) list.filter를 통해 매개변수로 받은 index와 list 아이템들의 index(listIdx)를 비교하여 해당하는 인덱스가 아닌 배열 요소들만으로 새로운 배열을 생성하여 list를 재렌더링한다. 

import { useState } from 'react'
import './App.css'

function App() {
  const [food, setFood] = useState("");
  const [list, setList] = useState([]);

  const handleAddList = () => {
    //spread연산자를 이용해서 State 렌더링
    setList([...list, food]);
    setFood("");
  }

  const removeList = (index) => {
    setList(list.filter((_, listIdx) => listIdx !== index));
  }

  return (
    <div>
      <input type="text" placeholder='좋아하는 음식을 적어주세요' value={food} onChange={(e) => setFood(e.target.value)} />
      <button onClick={handleAddList}>등록</button>
      <ul>
        {list.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => removeList(index)} >삭제</button>
          </li>))}
      </ul>
    </div>
  )
}
export default App

 

 

배열 항목 수정

(1) 수정 할 항목의 인덱스를 저장하는 state(isEditingIndex)와 편집한 input 값을 담는 state(editedCommnet)를 정의한다. 

(2) isEditingIndex의 초기값이 null값이기 때문에 list.map을 통해 list 배열 내의 모든 요소를 호출한다. 호출하면서 수정버튼에 setEditedIndex, setEditedComment를 이용하여 수정할 항목의 인덱스를 가져오고, 수정 버튼이 눌렸을 때 해당 배열의 값을 수정 시 나타나는 input값에 value로 설정한다.

(3) isEditingIndex === index 조건을 통해서, 해당 조건이 맞을 경우 input창과 등록버튼이 나타난다.

(4) setEditedComment를 통해 input value를 editedComment로 설정하고, list 배열을 구조분해 할당을 통해 복사하여 해당하는 인덱스의 값을 editedComment로 변경한 후에 setList를 통해 list를 재 렌더링 한다. 

import { useState } from 'react';
import './App.css';

function App() {
  const [food, setFood] = useState("");
  const [list, setList] = useState([]);
  
  // isEditingIndex를 통해 현재 수정 할 항목의 인덱스를 저장
  const [isEditingIndex, setEditingIndex] = useState(null);

  // editedComment 편집 중인 댓글의 내용 저장하는 상태 
  const [editedComment, setEditedComment] = useState("");

  // 사용자가 필드에 입력할 때 호출되어 editedComment 값을 변경한다. 
  const handleEditChange = (e) => {
    setEditedComment(e.target.value);
  };

  // 사용자가 필드를 수정한 후에 완료 버튼을 누르면 editedComment를 수정한다. 
  const handleEditSubmit = (index) => {
    const newLists = [...list];
    newLists[index] = editedComment;
    setList(newLists);
    setEditingIndex(null); // 편집 상태 해제
  };

  const handleAddList = () => {
    if (food) {
      setList([...list, food]);
      setFood("");
    }
  };

  const removeList = (index) => {
    setList(list.filter((_, listIdx) => listIdx !== index));
  };

  return (
    <>
      <input
        type="text"
        placeholder='좋아하는 음식을 적어주세요'
        value={food}
        onChange={(e) => setFood(e.target.value)}
      />
      <button onClick={handleAddList}>등록</button>

      <ul>
        {list.map((item, index) => (
          isEditingIndex === index ? (
            <li key={index}>
              <input type="text" value={editedComment} onChange={handleEditChange} />
              <button onClick={() => handleEditSubmit(index)}>완료</button>
            </li>
          ) : (
            <li key={index}>
              {item}
              <button onClick={() => {
                setEditingIndex(index);
                setEditedComment(item);
              }}>수정</button>
              <button onClick={() => removeList(index)}>삭제</button>
            </li>
          )
        ))}
      </ul>
    </>
  );
}

export default App;