Definitelytyped: ts 2.0 엄격한 null 검사로 defaultProps 구현

기본 props는 런타임에 설정되기 때문에 type assertion 외에 이를 잘 처리할 수 있는 방법이 있는지 잘 모르겠습니다. (물론, 항상 엄격한 null 검사를 비활성화할 수 있습니다.)

다음은 귀하의 예에서 이 문제를 해결할 수 있는 방법입니다.

interface TestProps { x?: number}

class Test extends React.Component<TestProps, null> {

    static defaultProps =  {x: 5};

    render() {
        const x: number = (this.props.x as number);
        return <p>{x}</p>;
    }
}

https://www.typescriptlang.org/docs/handbook/basic-types.html#type -assertions 참조

좀 더 우아한 처리 방법이 있다면 듣고 싶습니다.

면책 조항: 저는 약 3일 동안 TypeScript를 사용해 왔으며 피곤하며 아마도 제가 무슨 말을 하고 있는지 모를 것입니다.

3개의 일반 유형 정의를 포함하도록 유형 정의 파일을 업데이트할 때 +1000.

이것은 ---strictNullChecks 없이도 괜찮았지만 지금은 많은 컴포넌트 클래스에서 확실히 문제가 될 것입니다.

Flow는 엄격한 null 유형 검사의 특성 때문에 유사한 클래스 구현도 구현합니다.
https://github.com/facebook/flow/blob/master/lib/react.js#L16
https://github.com/facebook/flow/blob/master/lib/react.js#L104 -L105

제3의 제네릭을 추가하기 위해 https://github.com/Microsoft/TypeScript/issues/2175 가 해결될 때까지 기다리는 것 외에는 옵션이 많지 않은 것 같습니다.
나는 그러한 (파격적인) 변경( class Component<P, S, D> 을 의미함)이 리뷰어에 의해 승인될 수 있다고 생각하지 않습니다.
@johnnyreilly @bbenezech @pzavolinsky 여러분은 그것에 대해 의견이 있으십니까?

@r00ger가 동의했습니다. 정의를 변경하는 것은 너무 방해가 됩니다.

Partial 사용을 고려한 사람이 있습니까?

에서와 같이:

    interface ComponentClass<P> {
-        defaultProps?: P;
+        defaultProps?: Partial<P>;
    }

위의 Partial 항목은 신경쓰지 마십시오.

부분은 부분 propTypes 문제를 선언하는 방법만 해결합니다. render lastName 는 여전히 string | undefined 유형입니다. 이 문제를 해결하려면 아래와 같이 as 또는 ! 를 사용하여 문자열을 캐스팅해야 합니다. 작동하지만 이상적이지는 않습니다.

interface IUser {
    firstName: string
    lastName?: string
}
export class User extends React.Component<IUser, {}> {
    public static defaultProps: Partial<IUser> = {
        lastName: 'None',
    }

    public render () {
        const { firstName, lastName } = this.props
        // error
        lastName.toUpperCase()

        return (
            <div>{firstName} {lastName}</div>
        )
    }
}

TS를 사용하기 시작했습니다. 내가 뭔가를 놓치고 있습니까?

유형 및 defaultProps에 대한 좋은 솔루션이 있는 사람이 있다면 저는 모두 귀입니다. 현재 다음과 같이 하고 있습니다.

interface Props {
  firstName: string;
  lastName?: string;
}

interface DefaultProps {
  lastName: string;
}

type PropsWithDefaults = Props & DefaultProps;

export class User extends React.Component<Props> {
  public static defaultProps: DefaultProps = {
    lastName: 'None',
  }

  public render () {
    const { firstName, lastName } = this.props as PropsWithDefaults;

    return (
      <div>{firstName} {lastName}</div>
    )
  }
}

+1
나는 현재 이 문제와 싸우고 있다.

+1

+1

세 번째 유형 매개변수를 추가하는 것 외에도 기본 props에 대해 props를 구별하는 기능이 필요합니다. 다행스럽게도 TS 2.4부터 이것이 가능합니다! https://github.com/Microsoft/TypeScript/issues/12215#issuecomment -319495340 참조

세 번째 매개변수를 추가하는 IMHO는 큰 문제가 아닙니다. 또한 Flow 팀도 이를 알고 있었고 최근에 이를 변경했습니다. 이러한 종류의 일을 처리하는 방법을 아는 것은 유형 검사기의 책임이어야 합니다.

오해하지 마세요. 저는 Typescript를 사랑하지만 Flow 0.53부터 React 개발에 더 우수하다고 말해야 합니다. https://medium.com/flow-type/even-better-support-for-react-in-flow- 25b0a3485627

@Hotell Flow에는 React.Component 에 대한 세 가지 유형 매개변수가 있습니다. - Flow에 링크된 Medium 기사에 따라 하위 클래스 주석에서 클래스 유형 매개변수를 유추할 수 있습니다. - 깔끔한 언어 수준 기능 TS는 지원하지 않지만 유형은 지원하지 않습니다. -선언 고려 AFAIK.

@aldendaniels

Flow에는 React.Component에 대한 세 가지 유형 매개변수가 있습니다.

아니요, 0.53 이전에는 그랬고 더 이상은 아닙니다.

@호텔 아, 물론입니다! 수정해주셔서 감사합니다.

AFAIK는 TS에서 기본 소품의 유형을 유추할 방법이 없습니다. 세 가지 유형의 매개변수 접근 방식을 사용하면 TypeScript 팀의 업스트림 변경 사항을 차단하지 않고 올바른 입력을 얻을 수 있습니다.

typeof MyComponent.defaultProps 를 type 매개변수로 전달하지 않고 유추된 유형의 정적 속성을 사용하는 방법을 알고 있습니까?

이 주제에 대한 소식이 있습니까? 누군가 세 번째 유형 매개변수를 추가하고 https://github.com/Microsoft/TypeScript/issues/12215#issuecomment -319495340을 사용하기 위해 PR을 합니까?

찬성 문제: 동일한 문제

+1

나는 또한 이것에 부딪쳤고 static defaultProps 사용을 자제하고 대신 도우미 HOC를 사용하기로 (이 문제가 제대로 수정될 때까지) 선택했습니다.

파일 구성 요소/helpers/withDefaults.tsx :

import * as React from 'react'

export interface ComponentDefaulter<DP> {
  <P extends {[key in keyof DP]?: any}>(Component: React.ComponentType<P>): React.ComponentType<
    Omit<P, keyof DP> &         // Mandate all properties in P and not in DP
    Partial<Pick<P, keyof DP>>  // Accept all properties from P that are in DP, but use type from P
  >
}

export default function withDefaults<DP>(defaultProps: DP): ComponentDefaulter<DP> {
  return Component => props => <Component {...defaultProps} {...props}/>
}

이제 다음을 사용할 수 있습니다.

파일 구성 요소/Button.tsx :

import * as React from 'react'
import withDefaults from './helpers/withDefaults'

export interface ButtonProps {
  label: string
  onPress: () => any
}

export const defaultProps = {
  onPress: () => undefined
}

class Button extends React.Component<ButtonProps> {
  // ...
}

export default withDefaults(defaultProps)(Button)

세 가지 잠재적인 단점(내가 생각할 수 있는):

1. HOC가 필요하지만 이것은 React 세계에서 매우 일반적인 패러다임이기 때문에 괜찮아 보입니다.
2. props를 일반 유형 매개변수로 선언해야 하며 props 속성의 추론에 의존할 수 없습니다.
3. defaultProps 의 유형에 대한 암시적 검사는 없지만 export const defaultProps: Partial<ButtonProps> = {...} 를 지정하여 해결할 수 있습니다.

@vsaarinen 에 따르면 props: Props & DefaultProps 기본 클래스를 작성하므로 기본 클래스를 확장하는 전체 클래스는 this.props as PropsWithDefaults $ 를 사용하지 않고 this.props 를 직접 사용할 수 있습니다.

이와 같이:

import * as React from 'react'

export class Component<P = {}, S = {}, DP = {}> extends React.Component<P, S> {
  props: Readonly<{ children?: React.ReactNode }> & Readonly<P> & Readonly<DP>
}

export interface Props {
  firstName: string
  lastName?: string
}

export interface DefaultProps {
  lastName: string
}

export class User extends Component<Props, any, DefaultProps> {
  render() {
    const { firstName, lastName } = this.props

    // no error
    return (
      <div>{firstName} {lastName.toUpperCase()}</div>
    )
  }
}

실제로 @qiu8310 은 완전히 작동하지 않았지만 여전히 기본 소품이 선택 사항이 아니라고 비명을 지르는 호출 사이트에 문제가 있었습니다. 약간의 조정으로 작동하도록 했습니다.

import * as React from 'react'

export class Component<P = {}, S = {}, DP = {}> extends React.Component<P, S> {
  // Cast the props as something where readonly fields are non optional
  props = this.props as Readonly<{ children?: React.ReactNode }> & Readonly<P> & Readonly<DP>
}

export interface Props {
  firstName: string
  lastName?: string
}

export interface DefaultProps {
  lastName: string
}

export class User extends Component<Props, any, DefaultProps> {
  render() {
    const { firstName, lastName } = this.props

    // no error
    return (
      <div>{firstName} {lastName.toUpperCase()}</div>
    )
  }
}

나는 제 3의 제네릭을 가지고 놀았고 결국 @qiu8310 의 제안과 비슷한 것을 갖게 되었습니다:

// ComponentWithDefaultProps.ts
import * as React from "react";

export declare class ComponentWithDefaultProps<P, S, DP extends Partial<P>> extends React.Component<P & DP, S> {}
type redirected<P, S, DP> = ComponentWithDefaultProps<P, S, DP>;
const redirected: typeof ComponentWithDefaultProps = React.Component as any;

export const Component = redirected;

// User.ts
import { Component } from "ComponentWithDefaultProps";
export interface Props {
  firstName: string
  lastName?: string
}
export interface DefaultProps {
  lastName: string
}

export class User extends Component<Props, {}, DefaultProps> {
  public render() {
    const { firstName, lastName } = this.props;
    return <div>{firstName} {lastName.toUpperCase()}</div>;
  }
}

그러나 이 두 가지 접근 방식(나와 위의 접근 방식) 모두 더 큰 문제를 일으킵니다. 내 예에는 다음과 같은 유형의 생성된 구성 요소가 있습니다.

User: React.ComponentClass<P & DP>
User["props"]: Readonly<{ children?: React.ReactNode }> & Readonly<P & DP>

분명히 User 의 인터페이스가 잘못되었습니다. React.ComponentClass<P & DP> 는 lastName 도 필요함을 의미하므로

<User firstName="" />;
//    ~~~~~~~~~~~~  Property 'lastName' is missing...

@qiu8310 의 예제 유형은 다음과 같이 다릅니다.

User: React.ComponentClass<P>
User["props"]: Readonly<{ children?: React.ReactNode }> & Readonly<P> & Readonly<DP>

그러나 tsc 의 JSX 검사는 props ' type 을 기반으로 하기 때문에 동일한 JSX 조각이 동일한 오류를 발생시킵니다.

<User firstName="John" />;
//    ~~~~~~~~~~~~~~~~  Property 'lastName' is missing...

재미있는 점은 <User firstName="John" /> 가 React.createElement(User, {firstName: "John"}) 로 바뀌고 있다는 것입니다. 이는 유효한 TypeScript입니다. 이 경우 유형 검사는 ComponentClass 첫 번째 유형 매개변수에 의존하므로

<User firstName="Jonh" />; // doesn't work, but
React.createElement(User, { firstName: "John" }); // works

보시다시피 제3의 제네릭이 있더라도 올바른 인터페이스로 구성 요소를 내보내려면 여전히 또 다른 트릭을 추가해야 합니다.

export const User = class extends Component<Props, {}, DefaultProps> {
    // ...
} as React.ComponentClass<Props>;

<User firstName="Jonh" />; // works

따라서 제3의 제네릭을 갖는 것은 별로 의미가 없습니다.

React 의 정의에 병합할 수 있는 좋은 솔루션이 없는 것 같습니다. 지금은 ComponentWithDefaultProps 를 사용하고 내보낸 구성 요소의 유형을 주장하는 것을 고수합니다.

export interface DefaultProps {
    lastName: string;
}
export interface Props extends Partial<DefaultProps> {
    firstName: string;
}

export type PropsWithDefault = Props & DefaultProps;

export const User: as React.ComponentClass<Props> =
class extends React.Component<PropsWithDefault> {
    render() {
        // no error
        return <div>
            {this.props.firstName}
            {this.props.lastName.toUpperCase()}
        </div>;
    }
};
// Note, we've assigned `React.Component<PropsWithDefault>` to `React.ComponentClass<Props>`

그 외에도 구성 요소의 메서드에서 this.props 유형의 모든 사용을 주장할 수 있습니다(예: const { lastName } = this.props as Props & DefaultProps 또는 this.props.lastName!.toLowerCase() 에 느낌표 사용).

이 토론에 대한 몇 가지 예를 찾았습니다 - https://github.com/gcanti/typelevel-ts#objectdiff

HOC 접근 방식(저는 데코레이터를 선호합니다)이라고 하는 @rifler 가 잠시 동안 여기에 있었습니다 . 우리는 런타임 오버헤드를 추가하지 않는 솔루션을 제시하려고 합니다.

오 좋은
당신이 해결책을 찾을 수 있기를 바랍니다

어떤 진전?

다음은 @r00ger 가 언급한 기술의 변형입니다.

interface IUser {
    name: string;
}
const User = class extends React.Component<IUser> {
    public static defaultProps: IUser = {name: "Foo"}
    public render() {
        return <div>{this.props.name}</div>;
    }
} as React.ComponentClass<Partial<IUser>>;
React.createElement(User, {}); // no error, will output "<div>Foo</div>"

위의 스니펫을 사용하면 작동하지만 사용자는 익명 클래스가 되므로 정적 속성을 사용할 수 없게 됩니다. 해키 솔루션은 다음과 같이 클래스 이름을 섀도잉하는 것입니다.

// tslint:disable-next-line:no-shadowed-variable
const User = class User extends React.Component<IUser>

이제 클래스 내에서 개인용 정적 필드를 사용할 수 있습니다. 공개 통계는 여전히 사용할 수 없습니다. 또한 tslint를 묵음 처리해야 할 필요성에 주목하십시오.

TS 2.8부터 Exclude 유형이 공식적으로 지원된다는 점을 언급할 가치가 있다고 생각했습니다.

type Omit<T, K> = Pick<T, Exclude<keyof T, K>>;

https://github.com/Microsoft/TypeScript/pull/21847을 참조하세요.

따라서 React.createElement() 가 Props 대신 다음을 요구하기만 하면 됩니다.

Omit<Props, keyof DefaultProps>

유일한 문제는 React 선언에 DefaultProps 유형이 없다는 것입니다. 이를 위해서는 세 번째 유형 매개변수가 필요하거나 정적 멤버 유형을 언어 기능으로 유추하는 기능이 필요합니다.

그 동안 우리는 다음과 같은 작업을 진행했습니다.

/**
 * The Create type allow components to implement a strongly thed create() function
 * that alows the caller to omit props with defaults even though the component expects
 * all props to be populated. The TypeScript React typings do not natively support these.
 */
export type Create<C extends BaseComponent<any, any>, D extends {} = {}> = (
  props?: typeHelpers.ObjectDiff<C['props'], D> & React.ClassAttributes<C>,
  ...children: React.ReactNode[]
) => React.ComponentElement<any, any>;

export interface DomPropsType {
  domProps?: domProps.DomProps;
}

export class BaseComponent<P, S = {}> extends React.Component<P & DomPropsType, S> {
  static create(props?: object, ...children: React.ReactNode[]) {
    return React.createElement(this, props, ...children);
  }

  constructor(props: P & DomPropsType, context?: any) {
  ...
}

그리고 모든 구성 요소는 다음과 같습니다.

export class InsertObjectMenu extends BaseComponent<Props, State> {
  static create: Create<InsertObjectMenu, typeof InsertObjectMenu.defaultProps>;
  static defaultProps = {
    promptForImageUpload: true,
  };
  ...
}

마지막으로 create 속성이 모든 구성 요소에 선언되도록 하는 린트 규칙이 있습니다. 우리는 JSX를 사용하지 않으므로 다음을 사용합니다.

InsertObjectMenu.create({...})

React.createElement() 대신.

우리는 1년 가까이 대규모 코드베이스에서 이 접근 방식을 사용해 왔으며 성공적으로 수행했지만 JSX를 채택하고 싶고 이것이 우리를 가로막고 있습니다.

이 "간단한 문제"에 너무 많은 시간을 투자했습니다. 여기 https://medium.com/@martin_hotell/ultimate -react-component-patterns-with-typescript-2-8-82990c516935 🖖

    interface Component<P = {}, S = {}, DP extends Partial<P>=P> extends ComponentLifecycle<P, S> { }
    class Component<P, S, DP extends Partial<P> = P> {
        constructor(props: P & DP, context?: any);

        // We MUST keep setState() as a unified signature because it allows proper checking of the method return type.
        // See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18365#issuecomment-351013257
        // Also, the ` | S` allows intellisense to not be dumbisense
        setState<K extends keyof S>(
            state: ((prevState: Readonly<S>, props: P) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
            callback?: () => void
        ): void;

        forceUpdate(callBack?: () => void): void;
        render(): ReactNode;

        // React.Props<T> is now deprecated, which means that the `children`
        // property is not available on `P` by default, even though you can
        // always pass children as variadic arguments to `createElement`.
        // In the future, if we can define its call signature conditionally
        // on the existence of `children` in `P`, then we should  remove this.
        private __externalProps: Readonly<{ children?: ReactNode }> & Readonly<P>;
        props: Readonly<{ children?: ReactNode }> & Readonly<P> & DP;
        state: Readonly<S>;
        context: any;
        refs: {
            [key: string]: ReactInstance
        };
    }

    class PureComponent<P = {}, S = {}, DP extends Partial<P>=P> extends Component<P, S, P> { }


interface ElementAttributesProperty { __externalProps: {}; }

마지막 줄을 잘 보세요.

이 변경 사항으로 우리는

interface Props {
    a: string
    b?: string
    c?: string
}

class Comp extends React.Component<Props, {}, typeof Comp.defaultProps> {
    static defaultProps = {
        b: ''
    }

    render() {
        const {a, b, c} = this.props

        let res = a.concat(b)  // ok
        let res1 = a.concat(c) //fail

        return null
    }
}



const res1= <Comp a=''/> // ok
const res3 = <Comp /> // fail

static defaultProps ( typeof Comp.defaultProps 를 생략하려면 ts 검사기를 변경해야 함)를 사용할 때 얻을 수 있는 가장 좋은 방법은 무엇입니까?
다른 옵션은 이미 언급되었습니다 - HOC, 유형 캐스트.

다음은 https://medium.com/@martin_hotell/ultimate -react-component-patterns-with-typescript-2-8-82990c516935의 아이디어를 기반으로 한 내 (매우 못생긴) 시도입니다.

type ExtractProps<T> = T extends React.ComponentType<infer Q> ? Q : never;
type ExtractDefaultProps<T> = T extends { defaultProps?: infer Q } ? Q : never;
type RequiredProps<P, DP> = Pick<P, Exclude<keyof P, keyof DP>>;
type RequiredAndPartialDefaultProps<RP, DP> = Required<RP> & Partial<DP>;

type ComponentTypeWithDefaultProps<T> =
  React.ComponentType<
    RequiredAndPartialDefaultProps<
      RequiredProps<ExtractProps<T>, ExtractDefaultProps<T>>,
      ExtractDefaultProps<T>
    >
  >;

function withDefaultProps<T extends React.ComponentType<any>>(Comp: T) {
  return Comp as ComponentTypeWithDefaultProps<T>;
}

interface IProps {
  required: number;
  defaulted: number;
}

class Foo extends React.Component<IProps> {
  public static defaultProps = {
    defaulted: 0,
  };
}

// Whichever way you prefer... The former does not require a function call
const FooWithDefaultProps = Foo as ComponentTypeWithDefaultProps<typeof Foo>;
const FooWithDefaultProps = withDefaultProps(Foo);

const f1 = <FooWithDefaultProps />;  // error: missing 'required' prop
const f2 = <FooWithDefaultProps defaulted={0} />;  // error: missing 'required' prop
const f3 = <FooWithDefaultProps required={0} />;  // ok
const f4 = <FooWithDefaultProps required={0} defaulted={0} />;  // ok

@decademoon , 이 솔루션을 @types/react 에서 사용할 수 있을 것 같습니다. 내 말은, 일반적인 React.ComponentType 를 귀하의 솔루션으로 대체하는 경우입니다.
그렇다면 PR을 작성할 수 있습니까?

@decademoon 귀하의 정의는 기본이 아닌 소품이 실제로 선택적 필드를 포함하는 경우를 처리하지 않습니다.

interface IProps {
  required: number;
  notRequired?: () => void;
  defaulted: number;
}

class Foo extends React.Component<IProps> {
  public static defaultProps = {
    defaulted: 0,
  };
}

내 경우에는 "RP"를 "필수"로 래핑하지 않도록 RequiredAndPartialDefaultProps 유형을 변경하여 작동하도록 했습니다.

type RequiredAndPartialDefaultProps<RP, DP> = RP & Partial<DP>;

여전히 적절한 솔루션이 없거나 NPM에서 작동하는 HOC가 없다는 사실에 놀랐습니다. 내가 놓친 것이 없다면.

https://github.com/Microsoft/TypeScript/issues/23812

안녕하세요 여러분. 이 스레드를 여전히 읽고 있다면 @JoshuaToenyes 가 가장 의미 있고 도움이 되는 설명을 했다고 생각합니다. 이것은 확실히 문제가 아니므로 관련이 없습니다. 이 경우 유형 어설션을 사용하십시오.

@toiletpatrol 실제로 @decademoon 의 솔루션(약간의 수정 포함)은 기본 소품을 자동으로 잘 처리합니다. 모든 사람에게 기능 표준을 제공하기 위해 React의 DT 정의에 확실히 병합될 수 있습니다.

@toiletpatrol @RobRendell 보셨나요 https://github.com/Microsoft/TypeScript/issues/23812?

@vkrol 나는 그것을 보았지만, 새로운 기능의 릴리스를 기다리지 않고 지금 당장 내 코드베이스에 Decademoon의 구현을 삭제할 수 있습니다.

까다로운 경우에 현재 사용하고 있는 또 다른 해결 방법:

const restWithDefaults = { ...Component.defaultProps, ...rest };
return <Component {...restWithDefaults} />;

아무 문제가 없는 것 같으므로 더럽지만 간단한 해결 방법으로 여기에 남겨 둡니다.

TS 3.2 및 react 16.7 타이핑이 이 문제를 수정하고 있습니다. 닫을 수 있습니까?

@Hotell 결국 어떻게 처리해야합니까? 나는 아직도 이것을 제대로 작동시키지 못한다.

다른 사람들의 시간을 절약하기 위해 다음은 Typescript 3의 릴리스 정보에 대한 링크입니다.
JSX에서 defaultProps 지원

@cbergmiller TypeScript 3.1의 릴리스 노트입니다 🙃

React.FunctionComponent 에 여전히 동일한 문제가 있습니다.

@denieler React.FunctionComponent defaultProps 를 사용하는 것은 권장하지 않습니다. 자연스럽지 않습니다. 기본 함수 매개변수를 사용하는 것이 좋습니다.

interface HelloProps {
  name?: string;
  surname?: string;
}

const HelloComponent: React.FunctionComponent<HelloProps> = ({
  name = 'John',
  surname = 'Smith',
}) => {
  return <div>Hello, {name} {surname}!</div>
};

@mgol props 를 구조화하지 않으려면 기본 함수 매개변수를 어떻게 정의할까요?
다음과 같이 "기본값" 속성만 구조화하는 것만 생각할 수 있습니다.

interface HelloProps {
  name?: string;
  surname?: string;
}

const HelloComponent: React.FunctionComponent<HelloProps> = ({
  name = 'John',
  surname = 'Smith',
  ...props
}) => {
  return <div>Hello, {name} {surname}! You are {props.age} years old.</div>
};

하지만 일부 소품만 추출하는 것은 부끄러운 일이라고 생각합니다.

@glecetre 다음을 사용할 수 있습니다.

HelloComponent.defaultProps = {
    name: 'John',
    surname: 'Smith'
}

@Glinkis 는 https://github.com/reactjs/rfcs/pull/107/files#diff -20b9b769068a185d90c23b58a2095a9dR184를 참고하세요.

@glecetre 왜 모든 소품을 분해하고 싶지 않습니까? defaultProps 를 정의하는 것보다 간단하고 입력하기 쉽습니다. 클래스 기반 구성 요소의 props 유형은 필요한 props가 defaultProps 에 항목이 있으면 더 이상 필요하지 않을 수 있으므로 외부에서 사용하기 위해 내보내는 경우 문제가 될 수 있습니다. defaultProps 를 사용하는 것도 약간 마법처럼 보이지만 매개변수 구조화에서는 모두 JavaScript입니다.