React에서 console.log() 사용하기

React에서 console.log()를 사용하면 JavaScript 값을 브라우저 개발자 콘솔에 출력해 디버깅 중에 확인할 수 있습니다. 확인하려는 값이 있는 위치에 로그를 두세요. props나 현재 렌더링의 상태를 살펴보려면 컴포넌트에서, 커밋된 상태를 관찰하려면 effect에서, 사용자 입력을 확인하려면 이벤트 핸들러에서 호출하면 됩니다.

React에서 console.log()가 하는 일

console.log()는 React 기능이 아니라 JavaScript 메서드입니다. 전달한 인수를 개발자 콘솔에 기록하며 페이지에 표시하지는 않습니다. 브라우저 개발자 도구를 열고 Console 패널을 선택하면 메시지를 볼 수 있습니다. 컴포넌트가 렌더링되어도 로그가 반드시 출력되는 것은 아니며, 코드 실행이 해당 호출에 도달할 때만 로그가 나타납니다.

console API와 메서드에 대한 자세한 내용은 MDN의 console 문서를 참고하세요.

기본 JavaScript 콘솔 로깅

문자열, 숫자, 객체, 배열 또는 여러 값을 console.log()에 전달할 수 있습니다. 다음은 독립적으로 실행할 수 있는 JavaScript 예제로, 인사말 문자열 하나를 개발자 콘솔에 출력합니다. 아래 줄이 그 결과입니다.

console.log("Hello, React!");

Hello, React!

예를 들어 console.log("user", user)처럼 앞에 이름을 붙이면 콘솔에서 객체를 쉽게 알아볼 수 있습니다. 브라우저 콘솔은 객체를 살펴볼 수 있는 형태로 표시하지만, 구체적인 표시 방식은 브라우저마다 다릅니다. 메시지에 스타일을 적용하려면 console.log("%cImportant", "color: red; font-weight: bold")처럼 console의 %c 형식 지정자를 사용할 수 있습니다. %c 뒤에 오는 스타일 문자열이 메시지 텍스트에 적용됩니다. console.important()는 기본 제공 메서드가 아니므로, 사용하려면 동작을 정의하는 사용자 지정 래퍼를 직접 만들어야 합니다.

컴포넌트 상태 로그 남기기

함수 컴포넌트의 본문에 console.log(count)를 두면 해당 렌더링에서 사용되는 count 값을 확인할 수 있습니다. React가 컴포넌트를 렌더링할 때마다 본문이 다시 실행되므로 로그가 여러 번 나타날 수 있습니다. Strict Mode를 포함한 개발 환경의 동작으로 렌더링이 추가로 발생할 수도 있으니, 사용자 동작 한 번당 로그가 한 번만 출력된다고 가정하지 마세요.

상태 업데이트는 이후 렌더링을 예약합니다. setCount(count + 1) 바로 다음에 로그를 남겨도 현재 렌더링의 count 값이 출력됩니다. 커밋된 상태 값을 매번 확인하려면 [count]를 의존성으로 지정한 effect 안에서 console.log(count)를 호출하세요. 이 effect는 최초 마운트 후에도 실행됩니다. 특정 상태 전환을 기록하려는 경우에는 상태 업데이트 함수 안에 로깅 부수 효과를 넣는 대신 업데이트를 요청하는 이벤트나 동작을 기록하세요.

props 살펴보기

props를 받는 컴포넌트 안에서 해당 prop을 로그로 남기세요. 예를 들어 user를 전달받은 자식 컴포넌트의 함수 본문에서 console.log("user prop", user)를 호출할 수 있습니다. 이렇게 하면 해당 렌더링에 전달된 값을 확인하고 부모에서 자식으로 데이터가 흐르는 과정을 추적할 수 있습니다. 컴포넌트 본문은 렌더링 때마다 실행되므로 같은 prop이 반복해서 기록될 수 있습니다. 중첩된 데이터라면 확인하려는 특정 필드만 로그로 남겨 출력을 훑어보기 쉽게 만드세요.

이벤트 데이터 로그 남기기

사용자가 페이지와 상호작용할 때의 데이터를 확인하려면 이벤트 핸들러 안에서 로그를 남기세요. 입력 변경 핸들러에서 console.log(event.currentTarget.value)를 호출하면 핸들러가 실행되는 시점의 입력 값을 읽습니다. 핸들러에서 상태도 업데이트한다면 이벤트 값은 즉시 확인할 수 있지만, 새 상태는 이후 렌더링에서 확인하게 됩니다. 핸들러에서 로그를 남기면 관련 없는 컴포넌트 렌더링 때문에 같은 메시지가 반복 출력되는 일을 피할 수 있습니다.

로그를 안전하게 사용하고 정리하기

로그는 임시 디버깅 도구로 다루세요. 배포 전에 더 이상 필요하지 않은 로그를 찾아 제거하세요. 특히 개인 정보, 토큰 또는 그 밖의 민감한 값이 포함된 메시지를 확인해야 합니다. 모든 프로덕션 빌드가 console.log() 호출을 자동으로 제거하는 것은 아니며, 제거 여부는 프로젝트의 빌드 설정에 따라 달라집니다. 의도적으로 남기는 운영 로그는 애플리케이션의 로깅 정책에 맞는 경우에만 유지하세요.

값을 확인할 때는 그 값을 사용할 수 있는 지점에서 로그를 남기세요. 컴포넌트 데이터는 렌더링 중이나 effect에서, 사용자 상호작용 데이터는 이벤트 핸들러에서 확인할 수 있습니다. 더 큰 규모의 디버깅에는 브라우저 중단점이나 React Developer Tools를 사용하면 코드에 계속 남는 로그 문 없이 실행 과정과 컴포넌트 데이터를 살펴볼 수 있습니다. 브라우저 콘솔의 지우기 버튼을 누르거나 console.clear()를 호출하면 현재 표시된 콘솔을 비울 수 있지만, 코드에 있는 로그 호출까지 제거되지는 않습니다. 프로덕션 번들에서 로그가 제거될 것으로 기대한다면 빌드 설정을 확인하세요. 그렇지 않다면 배포 전에 소스에서 임시 호출을 제거하세요.