debug-react.md

리액트 디버깅

리액트 프로젝트를 VSCode 와 Chrome 을 통하여 손쉽게 디버깅 하는 방법을 알아보겠습니다.

설치

Debugger For Chrome VSCode 익스텐션을 설치하세요.

그 다음에는, 프로젝트의 루트경로에 .vscode/launch.json 파일을 만드세요.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src"
    }
  ]
}

다음, 터미널에서 yarn start 를 통해 리액트 개발자 도구를 실행하세요.

yarn start

그럼, 디버깅 할 준비가 거의 완료되었습니다.

우선, 디버깅 할 컴포넌트인 카운터 컴포넌트를 만드세요.

// file: src/Counter.js
import React, { Component } from 'react';

class Counter extends Component {
  state = {
    number: 0
  }
  handleClick = () => {
    this.setState({
      number: this.state.number + 1,
    })
  }
  render() {
    return (
      <div>
        <h1>{this.state.number}</h1>
        <button onClick={this.handleClick}>
          PLUS 
        </button>
      </div>
    );
  }
}

export default Counter;

그 다음엔 이렇게 코드의 좌측을 눌러서 breakpoint 를 설정하세요.

그리고 이 컴포넌트를 App 에서 렌더링하세요.

import React, { Component } from 'react';
import Counter from './Counter';

class App extends Component {
  render() {
    return (
      <div>
        <Counter />
      </div>
    );
  }
}

export default App;

끝났습니다! F5 를 누르시거나 VSCode 상단의 디버그 -> 실행을 누르세요.

그러면 우리가 설정한 브레이크포인트에서 앱이 멈추게 될 것입니다. VSCode 에서 자바스크립트 레퍼런스들에 마우스를 올려보세요.

현재 상태들을 확인해보실 수 있을것입니다.