[React] React에서 서버에게 동일한 요청을 보낸 후 동일한 응답을 받았을 때, 상태가 바뀌는가?

Q. React에서 서버에게 동일한 요청을 보낸 후 동일한 응답을 받을 때, 상태가 바뀌는가?

면접에서 이런 질문을 받는다고 생각해보자.

이 질문의 답변부터 얘기하자면,

💡 React에서 서버에게 동일한 요청을 보낸 후 동일한 응답을 받았을 때, 일반적으로 상태는 자동으로 변경되지 않는다.

(하지만, 참조 형식의 객체를 다룰 때는 참조의 동등성을 비교할 수 있다.)

 

Why? 왜 상태가 변경되지 않는가?

React에서 상태의 변경 여부는 참조가 아닌 값의 동등성(equality)을 기준으로 판단된다.

상태를 업데이트할 때, setState 또는 useState를 사용하는 경우 React는 이전 상태와 새로운 상태의 값을 비교한다.

이를 통해 React는 변경된 상태만 업데이트하고, 변경되지 않은 상태는 무시한다.

값의 동등성 비교는 JavaScript에서 === 연산자를 사용하여 수행된다. === 연산자는 참조가 아니라 값의 동등성을 비교한다.

 

일반적인 경우가 아닌 *참조 형식의 객체 를 다룰 경우는?

값의 동등성 비교는 일반적인 경우에 해당한다.

예를 들어, 서버 응답 데이터가 이전 상태의 객체와 동일한 참조를 가지고 있다면, React는 값의 동등성이 아닌 참조의 동등성을 비교할 수 있다. 따라서 이전 상태와 동일한 객체 참조를 가진 응답 데이터를 받은 경우에는 상태가 변경되지 않을 수 있다. 

이런 경우는, React는 객체의 참조만을 비교하므로, 객체의 내부 값이 변경되었을 때는 참조의 동등성을 비교할 수 없다.

객체의 내부 값이 변경된 경우에는 새로운 객체를 생성하여 상태를 업데이트해야만 React에서 상태 변경을 감지할 수 있다.

이를 위해 불변성(Immutability)의 원칙을 따르고 새로운 객체를 생성하는 것이 좋다. 

 

(여기서 언급되는 Reference는 무엇인가?)

Reference(참조)는 메모리 상의 객체 또는 값에 대한 식별자이다. Javascript에서 객체와 배열은 Reference(참조) 타입으로 처리된다.

예를 들어, 다음과 같이 객체를 생성하고 변수에 할당하는 경우 !

const obj1 = { name: 'John' }; // 객체 생성
const obj2 = obj1;	// 객체를 변수에 할당

obj1.name = 'Jane';
console.log(obj2.name); // 출력: Jane

obj1와 obj2는 동일한 객체를 참조한다! 즉, obj2는 obj1의 Reference(참조)를 가리키고 있다.

이 경우, obj1와 obj2는 같은 객체를 가리키고 있으므로 하나의 객체를 수정하면 다른 변수로도 변경 내용이 반영된다!

=> 얕은 복사(shallow copy) 

 

이와 달리, 원시 타입(primitive type)은 숫자, 문자열, 불리언은 값(value) 타입으로 처리된다.

위 예제에서 num2는 num1의 값을 복사했기 때문에 독립적으로 처리된다. 따라서 num1의 값을 변경해도 num2에는 영향을 주지 않는다.

let num1 = 10;
let num2 = num1;
num1 = 20;
console.log(num2); // 출력: 10

 

 

결론:

React에서 서버에게 동일한 요청을 보낸 후 동일한 응답을 받았을 때, 상태는 일반적으로 자동으로 변경되지 않는다.

React는 상태의 변경 여부를 판단하기 위해 값의 동등성을 비교하며, 값이 동일하다면 상태 변경이 발생하지 않는다. 

참조 형식의 객체를 다룰 때는 값의 동등성이 아닌 참조의 동등성을 비교한다. 

 

원시 타입(Primitive Type): 정수, 실수, 문자, 논리 리터럴 등의 실제 데이터 값을 저장하는 타입

참조타입(Reference Type): 객체(Object)의 번지를 참조(주소를 저장)하는 타입으로 메모리 번지 값을 통해 객체를 참조하는 타입

 

 

Reference

https://velog.io/@hoon0123/react%EC%9D%98-state%EA%B0%80-%EA%B0%9D%EC%B2%B4%EB%B0%B0%EC%97%B4%EB%9D%BC%EB%A9%B4..feat.-%EB%B3%80%EC%88%98