[React] 상태에 오브젝트 사용: ScoreKeeper 컴포넌트의 점수 업데이트

이번에는 리액트에서 상태를 업데이트하는 데에 새로운 시도를 해보려 합니다. "ScoreKeeper"라는 게임 점수 기록 컴포넌트를 만들 예정이며, 여러 참가자의 점수를 관리하는데 초점을 맞추고 있습니다.

 

이 컴포넌트에서는 참가자 1과 참가자 2의 점수를 증가시키는 버튼이 있습니다. 기존에는 각각의 상태 조각을 만들어 사용했지만, 이제는 두 참가자의 점수를 관리하기 위해 하나의 오브젝트를 사용할 것입니다.

const [scores, setScores] = useState({ p1Score: 0, p2Score: 0 });

기존에는 숫자나 문자열과 같은 기본 데이터 타입을 다뤘지만, 이번에는 오브젝트를 사용하여 상태를 업데이트하는 방법을 살펴보겠습니다. 그러나 주의할 점은 이렇게 오브젝트를 직접 수정하는 것이 아니라, 복사본을 만들어 수정 후 새로운 상태로 설정해야 합니다.

버튼 클릭 시 참가자 1의 점수를 증가시키는 함수 increaseP1Score를 살펴봅시다.

function increaseP1Score(){
        setScores(oldScores => {
            return { ...scores, p1Score: oldScores.p1Score + 1}
        });
    }

위와 같이 상태 업데이트를 위한 함수 안에서 이전 상태를 전개 연산자로 복사하고, 변경이 필요한 부분만 수정하여 새로운 상태를 반환합니다.

 

이렇게 함으로써 리액트는 상태 변경을 감지하고 재렌더링을 수행합니다. 또한, 이러한 방식은 오브젝트의 불변성을 유지하면서 상태를 업데이트하는데 효과적입니다.

 

ScoreKeeper 전체 코드

ScoreKeeper 전체 코드

import { useState } from "react";
function ScoreKeeper() {
    const [scores, setScores] = useState({p1Score: 0, p2Score: 0})
    function increaseP1Score(){
        setScores(oldScores => {
            return { ...scores, p1Score: oldScores.p1Score + 1}
        });
    }
    function increaseP2Score(){
        setScores(oldScores => {
            return { ...scores, p2Score: oldScores.p2Score + 1}
        });
    }
    return (
        <div>
            <p>Player 1: {scores.p1Score}</p>
            <p>Player 2: {scores.p2Score}</p>
            <button onClick={increaseP1Score}>+1 Player 1</button>
            <button onClick={increaseP2Score}>+1 Player 2</button>
        </div>
    )
}

export default ScoreKeeper;

그리고 다수의 참가자를 다루어야 할 경우에도 이 방법이 유용하게 사용될 수 있습니다. 더 복잡한 게임이나 애플리케이션에서도 이 원리를 응용하여 효과적으로 상태를 관리할 수 있습니다. 계속해서 연습하면서 이러한 상태 업데이트 패턴을 익숙하게 만들어봅시다.