Reactjs

2019년 리액트 개발자를 위한 22 가지 놀라운 도구 (2)

조회 376 (작성일 2019.08.13 20:25)
- 음성
- 목록
- - 검색

5. react-lifecycle-visualizer

react-lifecycle-visualizer는 임의의 React 컴포넌트의 라이프 사이클 방법을 추적하고 시각화 하기 위한 npm 패키지입니다.

렌더링 한 이유와 마찬가지로 선택한 모든 구성 요소를 사용하여 수명 주기 시각화 도구를 가져올 수 있습니다.

import React from 'react'
import {
  Log,
  VisualizerProvider,
  traceLifecycle,
} from 'react-lifecycle-visualizer'

class TracedComponent extends React.Component {
  state = {
    loaded: false,
  }

  componentDidMount() {
    this.props.onMount()
  }

  render() {
    return <h2>Traced Component</h2>
  }
}

const EnhancedTracedComponent = traceLifecycle(TracedComponent)

const App = () => (
  <VisualizerProvider>
    <EnhancedTracedComponent />
    <Log />
  </VisualizerProvider>
)

아래와 같이 비주얼 라이저가 나타납니다.

react_lifecycle_visualizer

그러나 이것의 단점은 현재 클래스 구성 요소에서만 작동하므로 후크는 아직 지원되지 않는다는 것입니다. (이것은 수명 주기에 관한 것이기 때문에 문제가 될 수 있습니까?)

6. 구피

Guppy는 데스크톱에서 실행되는 React의 친숙한 무료 응용 프로그램 관리자이자 작업 관리자입니다. 그들은 새로운 반응을 보이는 사람들을 우선시하는 것 같습니다. 그러나 고급 개발자에게도 유용 할 수 있습니다.

새로운 프로젝트 생성, 작업 실행 및 종속성 관리와 같이 개발자가 정기적으로 반응하는 많은 일반적인 작업에 친숙한 그래픽 사용자 인터페이스를 제공합니다.

Windows 지원은 2018 년 8 월에 추가되었으므로 크로스 플랫폼임을 확신 할 수 있습니다.

붕어 모양은 다음과 같습니다.

guppy1

7. react 테스트 라이브러리

나는 단위 테스트를 작성할 때 느낌이 좋기 때문에 반응 테스트 라이브러리를 항상 좋아했습니다. 이 패키지는 우수한 테스트 관행을 장려하는 반응 DOM 테스트 유틸리티를 제공합니다.

이 솔루션은 구현 세부 사항을 테스트하는 문제를 해결하고 사용자가 보는 것처럼 반응 구성 요소의 입력 / 출력을 테스트합니다.

구현 세부 사항을 테스트하는 것은 앱이 예상대로 작동하도록 하는 효과적인 방법이 아닙니다. 물론, 구성 요소에 필요한 데이터를 얻는 방법, 사용할 정렬 방법 등에 대해 더 많은 확신을 가질 수 있지만 구현 방식을 변경하여 다른 데이터베이스를 가리키는 방식을 변경해야 하는 경우 단위 테스트는 결합 된 로직인 구현 세부 사항이므로 실패합니다.

react 테스트 라이브러리가 해결하는 문제는 이상적으로는 사용자 인터페이스가 작동하고 결국 올바르게 표시되기를 원하기 때문입니다. 해당 구성 요소에 데이터를 가져 오는 방법은 여전히 예상되는 출력을 제공하는 한 중요하지 않습니다.

이 라이브러리를 사용하여 테스트를 수행하는 방법에 대한 예제 코드는 다음과 같습니다.

// Hoist helper functions (but not vars) to reuse between test cases
const renderComponent = ({ count }) =>
  render(
    <StateMock state={{ count }}>
      <StatefulCounter />
    </StateMock>,
  )

it('renders initial count', async () => {
  // Render new instance in every test to prevent leaking state
  const { getByText } = renderComponent({ count: 5 })

  await waitForElement(() => getByText(/clicked 5 times/i))
})

it('increments count', async () => {
  // Render new instance in every test to prevent leaking state
  const { getByText } = renderComponent({ count: 5 })

  fireEvent.click(getByText('+1'))
  await waitForElement(() => getByText(/clicked 6 times/i))
})

8. React 개발자 도구

React 개발자 도구는 Chrome 및 Firefox 개발자 도구에서 React 구성 요소 계층 구조를 검사 할 수 있는 확장입니다.

이것은 이 목록에서 가장 일반적으로 알려진 것으로 개발자가 앱을 디버깅하는 데 사용할 수 있는 가장 유용한 도구 중 하나입니다.

9. 비트

material-ui 또는 semantic-ui-react와 같은 컴포넌트 라이브러리를 사용하는 좋은 대안은 Bit입니다.

이를 통해 수천 개의 공개 소스 구성 요소를 탐색하고 이를 사용하여 프로젝트를 빌드할 수 있습니다.

bit

탭, 버튼, 차트, 테이블, navbar, 드롭 다운, 로딩 스피너, 날짜 선택기, 빵 부스러기, 아이콘, 레이아웃 등을 포함하여 누구나 사용할 수 있는 반응 구성 요소가 너무 많습니다. 이들은 다른 react 개발자가 업로드 한 것입니다.

그러나 날짜 간 거리 서식과 같은 유용한 유틸리티도 있습니다.

10. 스토리 북

스토리 북에 대해 아직 모른다면 UI 구성 요소를 보다 쉽게 구축 할 수 있도록 하려면 스토리 북을 사용하는 것이 좋습니다. 이 도구는 반응 형 구성 요소를 실시간으로 독립적으로 개발할 수 있는 핫 리로딩을 지원하는 라이브 개발 서버를 시작합니다.

이것에 대한 또 다른 좋은 점은 오픈 소스 인 현재의 기존 애드온을 사용하여 개발 경험을 완전히 새로운 수준으로 끌어 올릴 수 있다는 것입니다. 예를 들어, storybook-readme 패키지를 사용하면 readme 문서를 작성하는 동시에 동일한 페이지에서 프로덕션용 반응 구성 요소를 개발할 수 있습니다. 이것은 일반적인 문서 페이지 역할을 하기에 충분합니다 :

storybook1