[2023-10-15] TIL - console.log 실수

바닐라 자바스크립트를 공부하면서 선언형 프로그래밍적으로 생각하는 방법을 배우게 됐다.

이러한 형식을 맞춰서 프로그래밍을 하게 되니까 

코드 가독성도 좋아지고, 다른 비슷한 코드를 리뷰했을 때도 잘 읽을 수 있어서 좋은 것 같았다.

 

Todo 앱을 만들면서  순조롭게 기능을 이해하고,

상태가 어떻게 관리되어 컴포넌트간의 의존성을 없애는 것을 배웠다.

 

나는 Todo앱을 만들고 앱에서 상태관리라던지 컴포넌트간의 상호작용이라던지 그걸 그림으로 한번에 보고 싶어서 작성하고 있었다..

 

 

코드를 다시 한번 보면서 각 기능들의 수행과정이나 컴포넌트가 가지는 상태들을 정리하는데 갑자기 이상한 점(?)이 생겼다.

productOption이라는 생성자에서 콜백함수 onSelect가 있는데 onSelect가 실행되면 클릭한 데이터를 넘겨주는 간단한 로직이였다.

 

내가 이상하다고 생각한 점은 아래와 같았다.

 

1. 초기 상태에는 selectedOptions 값이 비어있음( 당연히 선택을 하기  전)

2. 옵션을 선택한 후 

3. this.setState를 통해서 값이 컴포넌트에 저장된다.

 

근데 여기서 console.log를 자세히 보자

나는 분명 console.log를 onSelect가 시작되는 시점에 출력하게 했다.

근데 개발자 도구의 콘솔에 출력되는 것은 아래와 같았다.

???...🤔

예상하기로는 선택하기 전의 값인 빈 상태가 나와야하는데

위처럼 이미 선택되어있는 값이 나오게 된다.

 

다른 곳에서 상태를 다시 불러오는 것인가 해서 코드를 아무리 뒤져봐도 안보였다.

처음에는 콜백함수의 특징인가..? 했지만 아닌 것 같았다.

 

 

왜 console.log에는 수행하기 전 데이터가 이미 들어와있는 것일까?

 

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

(JavaScript) 입문자가 겪기 쉬운 console.log 실수

 

해당 상황에 대한 이유를 간단히 말하자면

console.log는 참조를 로깅하기 때문에, 객체와 같이 내용물이 변할 수 있는 것들은 내용이 실시간으로 바뀐다

 

객체 자체를 직접 콘솔에 찍을 경우브라우저(크롬)는 obj에 대한 참조를 이용해 console 에 값을 찍어 주기 때문에 스크립트 실행이 끝난 후와 같은 최종 결과만을 보게 된다.(Node 환경에서는 이런 문제가 없음!)

 

그래서 객체인 값을 로깅할 때는 깊은 복사를 해서 로깅을 하거나 객체가 아닌 값을 로깅해야 한다고 합니다.

 

깊은 복사?
 - 실제 값을 메모리 공간에 복사(힙 영역)하기 떄문에 참조하고 있는 실제 값이 다르다.
 - 즉 우리가 원하는 "복사본"의 의미이다.
얕은 복사?
 - 주소값을 복사(스택 영역)하기 떄문에 참조하고 있는 실제 값은 같다.
 - 즉 복사되지만 같은 값을 공유하게 된다.

 

객체가 아닌 값을 로깅해야한다?

 - 예를 들어서 객체를 로깅하지말고, 객체의 length를 로깅하는 방법을 이용!

 

 

그러면 이 문제는 브라우저가 console.log안의 데이터를 참조로 출력하기 때문인가?

자바스크립트의 실행이 모두 끝난 후에 로그를 출력하기 때문에 이러한 현상이 발생하는 것인가?

 

나중에 브라우저가 자바스크립트를 실행하는 과정을 다시 봐야겠다..

 

 

이처럼 주의할 점이 있었다는 것을 오늘에서야 알 게 됐다...😂

console.log로만 디버깅을 수행했던 저에게 중요한 점이었다.