[React, JavaScript] 이벤트 핸들러에서 최신 상태 값 읽기

 

자바스크립트 그리고 이에 기반한 리액트에서 뷰 컴포넌트(HTML 요소)에 이벤트 핸들러 함수를 추가하면 함수의 실행 루틴뿐 만 아니라 이벤트 핸들러 등록 시점의 상태값까지 한꺼번에 가져온다. 예를 통해 살펴보자.

let value = 0;

function onClickButtonHandler(){
	console.log('onClickButtonHandler().value:', value);

	value = value + 1;
}

<button onClick={onClickButtonHandler}>Button 1</button>
<button onClick={onClickButtonHandler}>Button 2</button>

 

위와 같은 코드에서 <Button 1>과 <Button 2>를 차례대로 한 번씩 클릭하면 0, 1의 값이 차례로 디버그 콘솔에 표시되어야 할 것 같은데 실제로는 0, 0의 값이 표시된다. 즉, 글로벌 변수인 value 값이 update되는 것이 아니라 각 버튼에 등록된 이벤트 핸들러가 등록될 당시에 복사된 value 값에서 1 증가하고, 다시 이 이벤트 핸들러를 클릭했을 때 이벤트 핸들러가 등록될 당시에 복사된 value 값인 0에서 값을 증가시키는 0 ↔ 1 반복이 일어난다.

 

위와 같은 현상의 원인은 이벤트 핸들러 등록 당시에 함수의 처리 루틴과 그 상태값까지 한번에 스냅샷을 찍어 가져오는 자바스크립트의 개념 때문이라고 알고 있다(이와 같은 개념의 이름을 자바스크립트에서 closure라고 한다고 들었던 것 같은데 사실 closure는 이와는 다소 다른 프로그래밍 개념이기 때문에 이름은 맞을 수도 있고 틀릴 수도 있다).

 

글로벌 변수의 값을 이벤트 핸들러에서 읽고 업데이트하고 싶을 때 immutable object(불변 객체)를 이용한 참조 방법을 사용할 수 있다. 아래 예를 살펴보자.

const valueObj = {"value": 0};

function onClickButtonHandler(){
	curValue = valueObj["value"]

	console.log('onClickButtonHandler().curValue:', curValue);

	valueObj["value"] = curValue + 1;
}

<button onClick={onClickButtonHandler}>Button 1</button>
<button onClick={onClickButtonHandler}>Button 2</button>

 

valueObj 변수에는 객체 {"value": 0}의 주소 값이 들어있다. 따라서 이 주소 값은 불변이 맞다. 하지만 주소 값이 가리키는 객체의 값은 변경될 수 있다. 자바스크립트에는 포인터 개념이 없기 때문에 call by reference를 위와 같이 구현해 줄 수 있다.

 

immutable object와 관련해서는 이전 포스팅인 아래 글을 참조하기 바란다.

2022.12.15 - [프로그래밍 언어 | 컴퓨터 관련] - [JavaScript] mutable and immutable object

[JavaScript] mutable and immutable object

 

■