React의 console.log()

console.log()는 개발자가 코드를 디버깅하는 데 사용하는 방법입니다. 콘솔에 JavaScript 값을 기록하는 데 사용됩니다. React는 ‘console.log()’ 메서드의 사용을 제한하지 않지만 특별한 JSX 구문 때문에 따라야 할 규칙이 있습니다.

React console 개체

console 개체는 수십 가지 디버깅 방법을 포함하는 인터페이스와 함께 제공됩니다. 공식 MDN 페이지에서 정확한 메소드 목록을 찾을 수 있습니다. 이 기사에서는 가장 널리 사용되는 메소드인 console.log()에 초점을 맞추고 이를 최대한 활용하는 방법을 살펴봅니다.

반응 로그인

React에서 값을 console.log()하는 방법에는 여러 가지가 있습니다. 구성 요소가 다시 렌더링될 때마다 값을 계속 기록하려면 render() 호출 아래에 console.log() 메서드를 넣어야 합니다. 다음은 이 구현의 모습입니다.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      input: ""
    }
  }
  render() {
    console.log('I log every time the state is updated');
    return <input type="text" onChange={(e) => this.setState({input: e.target.value})}></input>;
  }
}

텍스트 <input> 요소에 새 값을 입력할 때마다 상태가 변경되어 구성 요소가 다시 렌더링되도록 트리거합니다. 그럴 때마다 지정된 텍스트를 콘솔에 기록합니다.

console.log() 값을 한 번만 사용하려면 React 클래스 구성 요소의 수명 주기 메서드를 사용할 수 있습니다. 실제 코드는 다음과 같습니다.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      input: ""
    }
  }
  componentDidMount(){
    console.log('I log only once');
  }
  render() {
    return <input type="text" onChange={(e) => this.setState({input: e.target.value})}></input>;
  }
}

앱을 디버그한 후에는 개발 모드를 종료하기 전에 console.log()의 모든 인스턴스를 삭제해야 합니다. console.log() 문은 프로덕션 모드에 아무것도 추가하지 않으므로 제거해야 합니다.

커스터마이징

React 개발자는 일반 console.log() 메서드의 스타일을 사용자 지정할 수 있습니다. 예를 들어 주의가 필요한 작업에 대한 특별 메시지를 생성하려는 경우 console.log()의 핵심 기능을 기반으로 사용자 정의 console.attention 메소드를 생성할 수 있습니다.

앱의 아무 곳에나 이 정의를 추가하고 message 인수와 함께 console.important() 메서드를 호출하면 콘솔에 컬러 메시지가 표시되는 것을 볼 수 있습니다.

console.important = function(text) {
console.log('%c important message', 'color: #913831')
}

다음은 컬러 콘솔 메시지의 예입니다.