2024.08.13

메달 컴포넌트를 만들어

메달 색(금, 은, 동)에 따라 값을 받게끔 구현하고 싶었습니다..

 

동적 속성 이름 (Computed Property Names)

객체 리터럴에서 속성 이름을 변수나 표현식으로 동적으로 지정할 수 있습니다.

 

const key = 'dynamicKey';
const obj = {
    [key]: 'value'
};
console.log(obj.dynamicKey); //'value'

 

`[key]`는 변수 `key`의 값을 속성 이름으로 사용한다는 의미입니다.

결과적으로 `obj` 객체는 `dynamicKey`라는 속성을 가지게 됩니다.

 

const Medal = (props) => {
    const { color, country, setCountry } = props;
    const title = {
        gold: "금메달",
        silver: "은메달",
        bronze: "동메달",
    };

    const inputHandler = (e) => {
        setCountry({
            ...country,
            [color]: Number(e.target.value),
        });
    };

    return (
        <p>
            {title[color]}
            <input
                type="number"
                placeholder="0"
                value={country[color]}
                onChange={inputHandler}
            />
        </p>
    );
};

`color`는 "gold", "silver", "bronze" 중 하나입니다.

`country` 객체는 `{ name: "미국", gold: 2, silver: 3, bornze: 1 }` 와 같이 현재 국가와 관련된 메달 수를 포함하고 있습니다.

"silver" 입력 필드에 `5`를 입력했다 가정하면 `inputHandler` 함수가 호출되며 `setCountry`가 업데이트된 객체를 설정하여 `country`상태를 업데이트합니다. → `[color]`는 "silver" 이므로 `{ ...country, silver: 5 }`