console.log 딱대ㅋㅋ

출처: Why I will no longer be using console.log() to check React state updates
12월 fe-news

console.log()

아마 js 코드를 쓰면서 가장 많이 쓴 메서드, 내 절친.
error를 만나면 우선적으로 지나쳐간 모든 스텍에 console.log()를 꽂아보는게 버릇이 됐다.
내가 원하는대로 브라우저가 렌더링을 돌리고 있는지 확인과 그리고 무언가 잘못됐다면,
어디서 문제가 생긴건지 확인하기 위해 손에 익어버린 메서드다.

Why I will no longer be using console.log() to check React state updates
이 글의 저자 Aharon Hyman도 console.log()와 친밀한 관계를 유지했지만,
react의 state를 체크할 경우에는 바람을 피게 됐는데 그 이유를 알아보자.

console.table()

사실 console.log()를 제외한 다른 메서드를 불러본 적이 없다.
table()? 이 메서드는 뭘까?

우선 우리가 알고 있는 console.log()를 확인해보자

console.log()로 객체를 불러 확인할 때 console에 출력되는 결과다.
클릭해서 상세보기를 해야 work값이 출력되는걸 알 수 있다.

반면 table()로 console을 확인해보면?

깔끔한 table이 우리를 반겨준다.

사실 객체 한개만 불러온 상태라 별 차이가 없어보인다.
굳이 친숙한 console.log()를 버리고 table()을 쓸 이유가 있을까?

이번에는 객체의 배열로 테스트를 해보자.

console.log()로 불러온 배열은 보기가 불편해졌다.
일일히 오브젝트를 하나씩 눌러 값을 확인해야 하는 상황.
이 배열을 table()로 불러온다면?

?! 신비한 체험! 한번에 촤라락!
단순히 객체를 console에 찍는 것보다 배열을 찍어서 봤을 때
table()의 진가를 확인할 수 있다.
그리고 console.table()은 파라미터로 columns를 받을 수 있다.

console.table(testArray, ["name","work"]);

파라미터에 보고 싶은 columns만 입력해 확인할 수가 있다.

이따금씩 받은 데이터를 배열로 변환할 때 결과 값을 보기가 그리 편하지는 않았었다.
하지만 table()로 확인한다면, 한번에 확인도 할 수 있고 특정 값만을 선택해 볼 수도 있다.