[React] 입력 값이 변경될 때 발생하는 이벤트

입력 값을 다양하게 갖고 있을 때, 중간의 값을 수정하고 싶은 경우가 있다.

그럴 떄에는 spread 연산자 방식을 사용하여 값을 변경할 수 있는데, 관련해서 알아보자.

    // 입력 값이 바뀌었을 때 데이터를 수정하는 핸들러
    const handleInputChange = (event) => {
        const {name, value} = event.target;
        setSongData((prevData) => ({
            ...prevData,
            [name]: value
        }));
    };

위의 코드를 예시로 보자.

입력 값이 바뀌었을 때 데이터를 수정하는 핸들러로, 많은 경우에 쓰이는 예시로 볼 수 있따.

이 코드에 대한 GPT의 코드 해석을 보는 것이 더 이해하기 쉬울 것이다.

GPT가 해주는 코드 해석

: handleInputChange 함수는 이벤트 객체를 매개변수로 받습니다.

1) 이벤트 객체에서 target 속성을 이용하여 입력 요소의 속성들에 접근합니다.

const handleInputChange = (event) => {

2) 비구조화 할당을 사용하여 입력 요소의 name과 value 속성을 추출합니다.

setSongData((prevData) => ({

3) 이전의 songData 상태를 가져와서 spread 연산자(...)를 사용하여 복사합니다.

...prevData,

4) 기존의 songData 상태를 업데이트하고자 하는 입력 요소의 이름(name)을 사용하여 해당 속성을 새로운 값(value)으로 업데이트합니다.

[name]: value

5) setSongData 함수를 사용하여 상태를 업데이트합니다.

}));

spread 연산자란?

: 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체를 확장시킵니다. 즉, 배열, 문자열, 객체 등을 개별 요소로 분리하는 것입니다.

: 스프레드 연산자는 기존 배열이나 객체를 변경하지 않고 복사본을 만들어주기 때문에 상태를 업데이트하거나 새로운 배열, 객체를 생성할 때 효과적으로 사용됩니다. React에서는 주로 상태를 업데이트할 때 사용되며, 위의 코드에서 보여준 것처럼 상태를 업데이트할 때 스프레드 연산자를 활용하여 이전 상태를 복사하고 새로운 값을 추가하거나 업데이트합니다.

배열에서 쓰이는 경우

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];

console.log(arr2); // [1, 2, 3, 4, 5]

객체에서 쓰이는 경우

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3, d: 4 };

console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }