자바스크립트의 call by value와 call by reference

자바스크립트에서 함수 호출 방식인 Call by Value와 Call by Reference에 대해 알아보겠습니다.

먼저, 각각의 개념을 살펴보고, 이것이 리액트에서 상태값을 업데이트 할 때 어떻게 작용할 수 있는지 살펴볼 것입니다.

 

 

 

자바스크립트에서 함수를 호출할때 매개변수를 할당 받을 수 있습니다.
매개변수는 여러개가 될수도있고 단일값일수도있고 객체나 또 다른 함수가 될 수도 있습니다.
매개변수를 전달하는 방식에 따라서 Call by value , Call by reference 로 나눌 수 있습니다.

---

Call by Value (값에 의한 호출)

 

Call by Value는 함수에 인자를 전달할 때, 해당 값의 복사본이 함수로 전달되는 방식을 말합니다. 이는 원시 데이터 타입(숫자, 문자열, 불리언 등)을 다룰 때 발생합니다. 함수 안에서 매개변수 값을 변경하더라도 호출한 곳의 변수 값에는 영향이 없습니다.

 

단일 값에 의한 매배변수 전달은 함수를 호출했을때 함수내에서 지역변수로서 사용되며 따라서 값이 복사되어 사용됩니다.

 

즉, 함수 내에서만 값의 변경이 발생하고 원본 값에는 영향을 주지 않습니다.

- 값의 불변성을 유지할 수 있지만

- 지역변수로 복사하여 활용하는만큼 메모리를 소모합니다.

 

function increment(x) {
  x++;
}

let num = 5;
increment(num);
console.log(num); // 출력 결과: 5

---

Call by Reference (참조에 의한 호출)

 

Call by Reference는 함수에 인자로 변수의 주소(참조)가 전달되는 방식을 말합니다.

이는 객체나 배열과 같은 참조형 데이터 타입을 다룰 때 발생합니다. 함수 내에서 객체의 속성을 변경하면, 호출한 곳의 객체에도 영향을 미칩니다.

 

객체 즉, 참조에 의한 매개변수 전달은 값이 전달되는것이 아니라 해당 객체가 저장된 메모리의 주소를 넘겨주게됩니다.

 

즉, 값의 복사가 아니라 원본데이터와 동일한 메모리주소를 바라보고 있습니다.

때문에 함수내에서 값의 변경이 이루어지게되면 원본값 또한 변하게 됩니다. 

 

값의 복사가 아닌 메모리에 직접 접근이기 때문에 처리가 빠르고 메모리를 절약 할 수 있지만 원본데이터의 불변성이 지켜지지 않는다는 단점이 있습니다. 

 

function addElement(arr, element) {
  arr.push(element);
}

let myArray = [1, 2, 3];
addElement(myArray, 4);
console.log(myArray); // 출력 결과: [1, 2, 3, 4]

 

---

React의 useState와 Call by reference

 

리액트에서 상태값이 업데이트되지 않는 문제는 주로 객체나 배열과 같은 참조형 데이터를 다룰 때 발생할 수 있습니다.

이는 JavaScript의 특성 중 Call by Reference와 관련이 있습니다.

이 문제를 이해하고 해결하기 위해서는 상태값을 업데이트할 때 주의해야 할 몇 가지 사항이 있습니다.

 

 

1. 불변성(Immutability) 유지:

리액트에서 상태를 업데이트할 때는 기존 상태를 직접 수정하지 말고, 이전 상태를 기반으로 새로운 객체나 배열을 생성하여 사용해야 합니다. 불변성을 유지하지 않으면 React는 상태 변화를 감지하지 못하고 리렌더링이 이뤄지지 않을 수 있습니다.

// 잘못된 방법
const incrementCount = () => {
  setCount({ value: count.value + 1 });
};

// 올바른 방법: spread 연산자를 사용하여 새로운 객체 생성
const incrementCount = () => {
  setCount(prevState => {
    return { ...prevState, value: prevState.value + 1 };
  });
};

 

 

2. 함수형 업데이트 사용:

setState에서 제공하는 함수형 업데이트를 활용하면, 이전 상태를 바탕으로 업데이트를 수행할 수 있습니다. 이렇게 하면 현재 상태의 참조를 직접 변경하지 않아도 안전하게 상태를 업데이트할 수 있습니다.

 

const incrementCount = () => {
  setCount(prevState => ({ ...prevState, value: prevState.value + 1 }));
};

 

 

3. 깊은 복사 활용:

객체나 배열을 다룰 때는 깊은 복사를 활용하여 복사본을 생성한 후 업데이트 작업을 수행할 수 있습니다.

const updateArray = () => {
  const newArray = [...myArray];
  newArray.push(4);
  setMyArray(newArray);
};

 

 

 

4. Object.assign 사용:

 

Object.assign 함수를 사용하여 객체를 복사하고 업데이트할 수도 있습니다.

 

const incrementCount = () => {
  setCount(prevState => Object.assign({}, prevState, { value: prevState.value + 1 }));
};

 

 

상태값을 업데이트할 때 이러한 방식을 고려하면 리액트 애플리케이션에서 발생하는 상태 업데이트 문제를 해결할 수 있습니다.

항상 불변성을 유지하고, 함수형 업데이트를 사용하며, 적절한 복사 방식을 선택하여 상태를 업데이트하는 습관을 기르면 좋겠네요 :)