[React] 배열의 모든 요소 업데이트하기

이 대본을 통해 배열의 모든 요소를 업데이트하는 일반적인 패턴을 살펴보겠습니다.

1. 이모티콘 생성 및 삭제

이전글에서 작성했던 코드에서는 이모티콘 생성과 삭제 기능이 구현되어 있습니다. 새 이모티콘을 추가할 때는 전개 연산자를 활용하여 이전 이모티콘들을 복사하고, 새 이모티콘을 추가한 새로운 배열을 생성합니다. 이 때, 삭제는 filter 메서드를 활용하여 삭제하고자 하는 이모티콘을 제외한 복사본을 만듭니다.

// 이모티콘 추가
const addEmoji = () => {
        setEmojis((oldEmojis) => [
            ...oldEmojis, 
            {id: uuid(), emoji: randomEmoji()}
        ]);
    };
    
// 이모티콘 삭제
    const deleteEmoji = (id) => {
        setEmojis(prevEmojis => {
            return prevEmojis.filter((e) => e.id !== id);
        })
    };

2. 배열의 모든 요소 업데이트하기

배열의 모든 요소를 업데이트할 때는 map 메서드를 활용합니다. 예시에서는 "MakeEverythingAHeart" 버튼이 클릭되었을 때, 각 이모티콘의 emoji 프로퍼티를 "하트"로 변경하는 방법을 보여줍니다.

const makeEverythingAHeart = () => {
        setEmojis((prevEmojis) => {
            return prevEmojis.map(e => {
                return {...e, emoji: "🧡"};
            });
        });
    }

위 코드에서 map 함수를 사용하여 기존 이모티콘 배열을 순회하고, 각각의 이모티콘에 대해 새로운 객체를 반환하고 있습니다. 여기서 주의할 점은 ...e를 사용하여 기존 객체의 모든 프로퍼티를 그대로 가져오면서, emoji 프로퍼티만 새로운 값으로 덮어쓴다는 점입니다.

이를 통해 기존 배열을 직접 수정하지 않고, 불변성을 유지하며 배열의 모든 요소를 업데이트할 수 있습니다. 이러한 패턴은 리액트에서 상태를 업데이트할 때 자주 활용되며, 예측 가능하고 안정적인 상태 관리를 가능케 합니다.

 

전체 코드

EmojiClicker.jsx

import { v4 as uuid } from 'uuid';
import { useState } from "react";

function randomEmoji() {
    const choices = ["😀","😁","😂","🤣","😍","😋"];
    return choices[Math.floor(Math.random() * choices.length)];
}

export default function EmojiClicker() {
    const [emojis, setEmojis] = useState([{id: uuid(), emoji: randomEmoji()}]);
    
    const addEmoji = () => {
        setEmojis((oldEmojis) => [
            ...oldEmojis, 
            {id: uuid(), emoji: randomEmoji()}
        ]);
    };

    const deleteEmoji = (id) => {
        setEmojis(prevEmojis => {
            return prevEmojis.filter((e) => e.id !== id);
        })
    };

    const makeEverythingAHeart = () => {
        setEmojis((prevEmojis) => {
            return prevEmojis.map(e => {
                return {...e, emoji: "🧡"};
            });
        });
    }

    return (
        <div>
            {emojis.map((e) => (
                <span 
                    onClick={() => deleteEmoji(e.id)}
                    key={e.id} 
                    style={{fontSize: "4rem"}}
                 >
                    {e.emoji}
                </span>
            ))}
            <button onClick={addEmoji}>Add Emoji</button>
            <button onClick={makeEverythingAHeart}>Make them all heart</button>
        </div>
    );
}