params 상태(state) 값 변경에 대한 이해

[ParkYK]

*** params 상태값 변경에 대한 이해 ***

JSX  소스 코드

<div>

            <label for="irum">이름 : </label>

            <input type="text" value={irum} id="irum" xxxxonChange={changeFunc} />

 </div>

 <div>

            <label for="nai">나이 : </label>

            <input type="text" value={nai} id="nai" xxxxonChange={changeFunc} />

 </div>

 <div>

            <label for="juso">주소 : </label>

            <input type="text" value={juso} id="juso" xxxxonChange={changeFunc} />

 </div>

…

함수 내 소스 코드 : 아래 코드에 대한 분석이 목적임  

const [params, setParams] = useState({

    irum:'',

    nai:'',

    juso:''

});

const [params, setParams]:    🏃‍♀️ 배열 디스트럭처링을 사용하여 상태 변수 (params)와 그 상태를 업데이트하는 함수 (setParams)를 선언한다.

useState:     🏃‍♀️ React Hook으로, 상태를 초기화한다. 초기 상태를 인수로 받음.

{ irum: '', nai: '', juso: '' }:     🏃‍♀️  초기 상태 객체로, 세 가지 속성(irum, nai, juso)을 모두 빈 문자열로 초기화한다.

* 상태 디스트럭처링 : 구조분해할당(destructuring assignment)

const { irum, juso, nai } = params;

const { irum, juso, nai }:     🏃‍♀️ 객체 디스트럭처링을 사용하여 params 상태 객체에서 irum, juso, nai 속성을 추출한다.

= params:     🏃‍♀️ params 객체에서 irum, juso, nai 값을 각각의 변수에 할당한다.

* 입력 변경 처리

새로운 객체는 setParams 함수의 인수로 전달된 객체이다. 상태 업데이트 과정을 보자.

const changeFunc = (e) => {

    const value = e.target.value;

    const id = e.target.id;

    setParams({

        ...params,

        [id]: value

    });

}

setParams 함수 호출: setParams 함수는 새로운 상태 객체를 인수로 받는다.

새로운 객체 생성: setParams 함수에 전달되는 객체는 다음과 같이 구성된다:

{

    ...params,

    [id]: value

}

...params:    🏃‍♀️ 스프레드 연산자를 사용하여 기존 params 객체의 모든 속성을 복사한다. 예를 들어, 현재 params가 { irum: 'John', nai: '25', juso: 'Seoul' }일 경우, 스프레드 연산자를 통해 { irum: 'John', nai: '25', juso: 'Seoul' }과 동일한 속성을 가진 새로운 객체가 생성된다.

[id]: value:    🏃‍♀️ 객체의 속성명을 동적으로 설정한다. id는 입력 필드의 id이고, value는 입력 필드의 값이다. 예를 들어, id가 'irum'이고 value가 'tom'일 경우, 새로운 객체는 { irum: 'tom', nai: '25', juso: 'Seoul' }가 된다. 새로운 객체가 setParams의 인수로 전달됨: 이렇게 생성된 새로운 객체가 setParams 함수에 전달된다.

상태 업데이트: setParams 함수는 전달받은 새로운 객체를 사용하여 params 상태를 업데이트 한다.

예를 들어, 사용자가 'irum' 입력 필드에 'Doe'를 입력했다고 가정해 보겠다.

기존 상태: { irum: 'John', nai: '25', juso: 'Seoul' }

입력 필드 이벤트:

   e.target.id: 'irum'

   e.target.value: 'Doe'

새로운 상태 객체:

{

    ...params,       // 기존 상태 속성 복사: { irum: 'John', nai: '25', juso: 'Seoul' }

    irum: 'tom'      // 'irum' 속성 업데이트: { irum: 'tom', nai: '25', juso: 'Seoul' }

}

업데이트된 상태: { irum: 'tom', nai: '25', juso: 'Seoul' }

따라서, 스프레드 연산자 ...params는 기존 상태 객체의 모든 속성을 복사하여 새로운 객체를 생성하고, 그 후에 특정 속성(id에 해당하는)을 value로 업데이트하여 최종적으로 setParams에 전달한다.

[김보현2]

추천해요(1)