입문자가 겪기 쉬운 console.log 관련 문제 모음

 

개발을 하다보면 console.log가 마음대로 작동하지 않아 애먹는 경우가 있습니다. 저도 같은 문제를 겪었었고,
이번에 면접을 보면서 제대로 알지 못했던 부분을 질문 받아 탈탈 털렸었기에 공부하며 알아보는 시간을 가졌습니다. 😂

입문자가 겪기 쉬운 console.log 관련 문제들을 알아봅시다.

 

😳 입문자가 겪기 쉬운 console.log 관련 문제 1

React를 사용할 때 setState를 실행하고 값이 바뀐것을 확인하기 위해 바로 밑줄에 console.log(state)를 해본 경험이 있을 것입니다. console.log는 새로 입력해준 값이 아닌 이전의 값을 출력합니다. 이유가 뭘까요?

const [state, setState] = useState<number>(0);

const incrementState = () => {
  setState(state + 1);
  setState(state + 1);
  setState(state + 1);
  setState(state + 1);
  
  console.log(state);
}

// 예상 출력
// 4
// ------
// 실제 출력
// 0

결론부터 말씀드리면, setState는 비동기로 동작하기 때문입니다.

 

setState가 비동기로 동작하는 이유

useState는 Object.js 메소드를 사용해 state의 값이 변하였는지 감지하고, state가 변하였다면 해당 컴포넌트부터 자식컴포넌트까지 render 함수를 실행해 rendering합니다.

state값이 여러번 바뀔 때마다 매번 화면이 리렌더링된다면 성능면에서 이슈가 생길 것이기 때문에, 이를 방지하기 위해 React는 16ms 동안 변경된 상태 값들을 모아서 한번에 리렌더링을 진행합니다. 이것을 Batch Update라고 합니다.

 

위와 같은 이유로 위의 코드는 incrementState 함수가 끝난 뒤에 (stack이 다 비워진 뒤에) state의 update가 반영됩니다.

 

 

😳 입문자가 겪기 쉬운 console.log 관련 문제 2

로깅을 할 때 많이 실수하는 부분이 있습니다. 다음 예제가 콘솔에 어떻게 표시될지 생각해봅시다.

var obj = {};
console.log(obj);
obj.a = 1;
console.log(obj);

처음은 당연히 {}가 되고, 두 번째는 {a : 1}이 됩니다. 콘솔을 살펴봅시다.

 

 

실제 코드에서는 a에 1을 넣기 전에 콘솔 로그를 찍었지만, 첫 번째 로그를 펴봤더니 a : 1이 들어있습니다.
console.log는 참조를 로깅하기 때문에, 객체와 같이 내용물이 변할 수 있는 것들은 내용이 실시간으로 바뀝니다.

 

 

코드가 가까이 있으면 헷갈리지 않지만, 다음과 같으면 엄청 헷갈려집니다. 배열(배열도 객체입니다)일 때를 봅시다.

var arr = [];
console.log(arr, arr.length);
// 복잡한 코드가 있다고 가정
setTimeout(function() { // 비동기 가정
  arr.push(5);
}, 0);

 

 

이번엔 arr.length까지 로깅을 해봤습니다. 분명히 로그에는 []와 0이 떴는데 []을 펴보니 length가 1이 되어있습니다.
이것만 알아둡시다. 객체를 로딩할 때는 객체의 내용 변경사항이 실시간으로 업데이트됩니다.

이 문제를 겪지 않으려면 객체를 깊은복사해서 로깅하거나, 객체가 아닌 값을 로깅하면 됩니다. 객체를 깊은 복사하는 것은 비용이 많이 들기 때문에 객체가 아닌 값을 로깅합시다.

예: arr을 로깅하지 말고(arr은 배열 객체이므로) arr.length를 로깅하기

 

 

 

참고

 

https://www.zerocho.com/category/JavaScript/post/5b2b45cf1350f9001b662ba6

 

[React] setState를 했는데 console.log엔 새로운 값이 반영이 안되는 이유