React Dev Tool - React conf 2021

React Dev Tool

해당 포스트는 React conf 2021 React Developer Tooling 의 내용을 토대로 작성했습니다.

## Key part of React developer experience
영상에서 React 개발자 경험의 핵심 포인트로 아래 3가지를 언급했습니다.
1. Productivity (생산력)
2. Debugging (디버깅)
3. Performance (성능)

 

React Dev Tool - hook

 

Dev Tools는 처음부터 hook 을 지원하므로 개발자가 hook 의 값을 검사하고 편집할 수 있습니다.
그러나 Dev Tool 을 사용하는 사용자들은 각 명시된 hook 에 이름이 표기되지 않아
디버깅 시 불편하다고 했습니다.

아래와 같은 react code 를 작성 후, localhost 에서 React Dev Tool 을 확인해보겠습니다.

function App() {
  const [text, setText] = useState<string>('')

  const handleTextChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target
     setText(value)
  }

  return (
    <div className="App">
      <input value={text} onChange={handleTextChange} />
    </div>
  );
}

export default App;

React Dev Tool Image

React Dev Tool 에서는 state: "" 와 같이 표기됩니다.
우리는 state 라고 명시된 값을 보고, 코드 상에서 어떤 값인지 무슨 용도인지 파악하기 어렵습니다.

이와 같은 문제를 해결하기 위해 React Dev Tool 에서
따로 해당 state 의 값을 확인할 수 있는 기능을 제공해줍니다.

pen icon

위에 표기된 pen 아이콘을 클릭할 경우,

pen icon click result

useState 로 선언 시 text 라고 작성했으므로, 위 사진처럼 Start 옆에 text 라고 명시된 것을 확인할 수 있습니다.

React Dev Tool - Timeline

React 18 의 기능에 대해 구체적으로 생각해보면, 기존에 제공된 profiler 로는 부족함을 느낄 수 있습니다.
동시성의 관련된 이슈, 각 component 별 렌더링 이슈를 빠르게 파악하는 목적으로도 사용할 수 있는
Timeline 이라는 기능이 이번에 추가되었습니다. 

Timeline 은 기존 브라우저의 performance Tool 과 굉장히 유사합니다.

Timeline Image

기존 브라우저의 performance Tool 과 달리 React Dev Tool 의 Timeline 은
React 관련 통찰력, 그리고 제안(해결방안)을 제공합니다. FilteredList component 는 매우 느리게 실행된다고 가정합니다.

text 입력 시, 앱에서 우선 순위가 높은 단일 업데이트를 예약하게 됩니다. 

Timeline Warning

결과적으로 text field 필터링된 이름 목록이 동시에 업데이트됩니다.
이 때문에 전체 업데이트가 오래 걸리게 되며, 사용자 경험성이 떨어지는 문제가 발생합니다.
Timeline Tool 에서는 이러한 업데이트를 분리하라고 위 이미지와 같이 경고합니다.

function App() {
  const [text, setText] = useState<string>('')
  const deferredText = useDeferredValue(text)


  const updateText = (event: ChangeEvent<HTMLInputElement>) => {
    const { value } = event.target
    setText(value)
  }
  return (
    <>
     <input value={text} onChange={updateText} />
     <FilteredList filterBy={text} />
   </>
  ); 
}

export default App;

이를 통해 우리는 React 18 에 추가된 useDeferredValue 라는 hook 을 통해 업데이트를 분리할 수 있습니다.
위와 같이 React 18 에서 추가된 기능들을 사용할 수 있는 경우의 수를 timeline 이라는 Dev Tool 기능으로
빠르게 파악할 수 있습니다.