기능 컴포넌트 기본 소품 vs 기본 파라미터

기능 컴포넌트 기본 소품 vs 기본 파라미터

리액트 기능 컴포넌트에서는 기본 소품을 설정하는 것이 좋습니다.Component.defaultProps또는 함수 정의의 디폴트파라미터를 사용하는 예를 나타냅니다.

기본 소품:

const Component = ({ prop1, prop2 }) => (
  <div></div>
)

Component.defaultProps = {
  prop1: false,
  prop2: 'My Prop',
}

기본 파라미터:

const Component = ({ prop1 = false, prop2 = 'My Prop' }) => (
  <div></div>
)    

defaultProps(핵심팀 중 한 명인 Dan Abramov에 따르면) 기능 컴포넌트에 대해서는 결국 권장되지 않으므로 향후에 대비한 기본 파라미터를 사용하는 것이 좋습니다.

일반적으로 (ES6) 두 번째 방법이 더 좋습니다.

구체적으로는 (React 컨텍스트에서) 첫 번째 단계는 컴포넌트 라이프 사이클의 주요 단계, 즉 초기화 단계이기 때문에 더 좋습니다.

주의: 리액트JS는 ES6보다 먼저 발명되었습니다.

첫 번째 방법은 디버깅하기 어려운 성능 문제를 일으킬 수 있습니다.특히 redux를 사용하는 경우에는 더욱 그렇습니다.

객체, 리스트 또는 함수를 사용하는 경우 이러한 객체는 모든 렌더에서 새로운 객체가 됩니다.컴포넌트의 ID를 체크하여 재렌더링을 실행할 필요가 있는지 여부를 확인하는 복잡한 컴포넌트가 있는 경우 문제가 발생할 수 있습니다.

const Component = ({ prop1 = {my:'prop'}, prop2 = ['My Prop'], prop3 = ()=>{} }) => {(
  <div>Hello</div>
)}

이 방법은 정상적으로 동작하지만 데이터베이스 연결 및/또는 반응 use effect 훅 및/또는 컴포넌트 상태 등 복잡한 컴포넌트와 상태가 있는 경우 재연장이 많이 발생할 수 있습니다.

일반적으로 기본 소품 개체를 별도로 작성하는 것이 좋습니다.

const Component = ({prop1, prop2, prop3 }) => (
  <div>Hello</div>
)

Component.defaultProps = {
  prop1: {my:'prop'},
  prop2: ['My Prop'],
  prop3: ()=>{}
}

또는

const defaultProps = {
  prop1: {my:'prop'},
  prop2: ['My Prop'],
  prop3: ()=>{}
}
const Component = ({
  prop1 = defaultProps.prop1,
  prop2 = defaultProps.prop2
  prop3 = defaultProps.prop3
 }) => (
  <div>Hello</div>
)

Pleasy Plug, 난 디폴트 프로의 저자야.

TypeScript 사용자인 경우 default-props가 있는 경우 고차 함수를 사용하여 defaultProps에서 올바른 컴포넌트 정의를 제공하는 데 도움이 될 수 있습니다.

예.

import { withDefaultProps } from 'with-default-props'

type Props = {
    text: string;
    onClick: () => void;
};

function Component(props: Props) {
    return <div onClick={props.onClick}>{props.text}</div>;
}

// `onClick` is optional now.
const Wrapped = withDefaultProps(Component, { onClick: () => {} })


function App1() {
    // ✅
    return <Wrapped text="hello"></Wrapped>
}

function App2() {
    // ✅
    return <Wrapped text="hello" onClick={() => {}}></Wrapped>
}

function App3() {
    // ❌
    // Error: `text` is missing!
    return <Wrapped onClick={() => {}}></Wrapped>
}

이 방법이 최선인지는 모르겠지만 효과가 있습니다:)

export interface ButtonProps {
    children: ReactNode;
    type?: 'button' | 'submit';
}

const Button: React.FC<ButtonProps> = ({ children, type = 'button' }) => {
    return (
        <button type={type}
        >
            {children}
        </button>
    );
};

여기 그 권고에 대한 공식 발표가 있다.defaultProps.

https://github.com/reactjs/rfcs/pull/107

질문하실지 모르겠지만, 아래 코드와 같은 것을 사용하는 것은 어떨까요?props || value대신defaultProps:

class SomeComponent extends React.Component {
  render() {
    let data = this.props.data || {foo: 'bar'}
    return (
      <div>rendered</div>
    )
  }
}

// SomeComponent.defaultProps = {
//   data: {foo: 'bar'}
// };

ReactDOM.render(
  <AddAddressComponent />,
  document.getElementById('app')
)

하지만 기억하세요defaultProps코드를 더 읽기 쉽게 만듭니다. 특히 더 많은 코드를 가지고 있다면props제어하고 있습니다.||오퍼레이터는 코드를 추하게 만들 수 있습니다.

예를 들어 다음과 같은 구조화 접근방식을 사용할 수 있습니다.

  const { inputFormat = 'dd/mm/yyyy', label = 'Default Text', ...restProps } = props;

언급URL : https://stackoverflow.com/questions/47774695/react-functional-component-default-props-vs-default-parameters