[React] 9. 배열의 동적 업데이트

잘못 된 내용에 대한 지적은 언제든 환영입니다.

리액트 앱에서의 배열 동적 업데이트

const [users, setUsers] = useState([
  {
    id: 1,
    username: "uncyclocity",
    email: "seongbeom_lee@kakao.com",
  },
  {
    id: 2,
    username: "yoong_kim",
    email: "dl2qja@gmail.com",
  },
  {
    id: 3,
    username: "sblee",
    email: "xuct227@gmail.com",
  },
]);

• 리액트 앱 내에서 배열을 업데이트 하기 위해서는 위와 같이 배열을 state 값으로 설정해주어야 한다.
• 불변성을 지키며 배열을 업데이트 하려면 새 배열을 반환하는 배열함수를 활용해야 한다.
  👉 concat, filter, map 등이 있다.

배열 요소 추가

1. spread 연산자 활용

   const user = {
     id: nextId.current,
     username,
     email
   }
   
   // 복붙 된 기존 users 배열의 요소들과 새로 추가할 요소를 포함한 새 배열
   setUsers([...users, user])

2. 기존 배열에서 원하는 요소를 추가한 새 배열을 반환하는 배열함수 concat 사용

   const user = {
     id: nextId.current,
     username,
     email
   }
   
   // 기존 users에 새 요소가 추가 된 새 배열
   setUsers(users.concat(user));

• 배열 요소를 추가한 후, 이후의 객체 리터럴 요소 추가를 위해 고유값을 의미하는 ref 변수 값을 1 증가시켜준다.

   nextId.current += 1;

배열 요소 삭제

• 지정한 조건에 부합하는 배열 요소만 추려 새 배열로 반환하는 배열함수 filter를 활용한다.

// 지정한 고유값(id)과 동일하지 않은 요소들만 추려 반환한다.
const onRemove = (id) => {
  setUsers(users.filter((user) => user.id !== id));
};

배열 요소 수정

• 지정한 함수를 호출한 결과값들을 추려 새 배열을 반환하는 배열함수 map을 활용한다.

// 지정한 고유값(id)과 동일한 요소인 객체 리터럴의 active 값을 반전시켜 반환하고,
// 동일하지 않은 고유값의 요소는 그냥 반환시킨다.
const activer = (id) => {
  setUsers(
    users.map((user) =>
      user.id === id ? { ...user, active: !user.active } : user
    )
  );
};

References
"12. useRef 로 컴포넌트 안의 변수 만들기" .velopert
"13. 배열에 항목 추가하기" .velopert
"14. 배열에 항목 제거하기" .velopert
"배열 항목 수정하기" .velopert
"React Hooks : useRef() 함수" .xiubindev