PropType과흐름

PropType과흐름

PropTypes와 Flow는 비슷한 내용을 다루지만 다른 접근 방식을 사용하고 있습니다.PropTypes는 런타임 중에 경고를 보내 서버 등에서 잘못된 형식의 응답을 신속하게 찾는 데 유용합니다.그러나 플로우는 미래인 것처럼 보이며 제네릭스와 같은 개념을 가진 매우 유연한 솔루션입니다.또한 Nucoma가 제공하는 자동완성은 Flow에 큰 장점입니다.

이제 새로운 프로젝트를 시작할 때 어떤 방법이 가장 좋은가 하는 것이 문제입니다.아니면 Flow와 PropTypes를 모두 사용하는 것이 좋은 솔루션일까요?둘 다 사용할 때의 문제는 중복된 코드를 많이 쓴다는 것입니다.다음은 제가 작성한 음악 플레이어 앱의 예입니다.

export const PlaylistPropType = PropTypes.shape({
    next: ItemPropTypes,
    current: ItemPropTypes,
    history: PropTypes.arrayOf(ItemPropTypes).isRequired
});

export type Playlist = {
    next: Item,
    current: Item,
    history: Array<Item>
};

두 정의 모두 기본적으로 동일한 정보를 포함하고 있으며 데이터 유형이 변경되면 두 정의를 모두 업데이트해야 합니다.

유형 선언을 PropTypes로 변환하기 위해 이 babel 플러그인을 찾았습니다. 이 플러그인은 솔루션이 될 수 있습니다.

이 질문을 한 지 1년 후, 저는 이 문제에 대한 제 경험을 업데이트 하고 싶었습니다.

Flow가 많이 진화했기 때문에 코드베이스를 입력하기 시작했고 새로운 PropType 정의를 추가하지 않았습니다.지금까지는, 이것은 좋은 방법이라고 생각합니다.왜냐하면 위에서 말한 것처럼 소품뿐만 아니라 코드의 다른 부분도 입력할 수 있기 때문입니다.이것은 매우 편리합니다.예를 들어 사용자가 변경할 수 있는 주의 소품 복사본이 있는 경우입니다.또, IDE의 자동 완성도 큰 장점입니다.

한쪽 방향의 자동변환기가 제대로 작동하지 않았다.따라서 새로운 프로젝트에서는 Flow over PropTypes를 사용하는 것이 좋습니다(두 번 타이핑을 하고 싶지 않은 경우).

둘 다 매우 넓은 활자 검사 분야에 속한다는 것 외에는, 둘 사이에 유사성이 별로 없습니다.

Flow는 언어의 슈퍼셋을 사용하는 정적 분석 도구입니다. 이를 통해 모든 코드에 유형 주석을 추가하고 컴파일 시 전체 버그를 잡을 수 있습니다.

PropTypes는 React에 패치된 기본 유형 검사기입니다.특정 컴포넌트에 전달되는 소품 유형 이외에는 확인할 수 없습니다.

프로젝트 전체에 대해 보다 유연한 유형 검사를 원하는 경우 Flow/TypeScript를 선택하는 것이 좋습니다.주석이 달린 유형만 컴포넌트에 전달하면 PropType은 필요하지 않습니다.

소품 타입만 체크하고 싶은 경우는, 코드 베이스의 나머지를 너무 복잡하게 만들지 말고, 보다 심플한 옵션을 선택해 주세요.

여기서 놓치는 점은 Flow가 정적 검사인 반면 PropTypes는 런타임 검사인 것입니다. 즉,

• 플로우는 코딩 중에 업스트림에서 오류를 대행 수신할 수 있습니다: 이론적으로 사용자가 알 수 없는 오류를 놓칠 수 있습니다(예를 들어 프로젝트에서 플로우를 충분히 구현하지 않은 경우 또는 깊이 중첩된 개체의 경우).
• PropTypes는 테스트 중에 다운스트림에서 검출되므로 놓치는 일이 없습니다.

Flow만을 사용하여 소품 유형을 선언해 보십시오.문자열 대신 숫자 등 잘못된 유형을 지정하십시오.Flow-aware Editor 내의 컴포넌트를 사용하는 코드로 플래그가 표시됩니다.그러나 이렇게 해도 테스트에 실패하지 않고 앱은 계속 작동합니다.

이제 잘못된 유형의 React PropTypes 사용을 추가합니다.이로 인해 앱이 실행될 때 테스트가 실패하고 브라우저 콘솔에 플래그가 표시됩니다.

이를 바탕으로 Flow를 사용하더라도 PropTypes를 지정해야 할 것으로 보입니다.

언급URL : https://stackoverflow.com/questions/36065185/react-proptypes-vs-flow