default props란?

 

Default Props

 

최근 Typescript에 대해서 알아보던 중 React에서 Default props 사용을 지양해야한다는 것을 알았다. 정확히 default props가 무엇인지, 왜 지양해야하는지 정리해본다.

 

Default Props란?

React 컴포넌트의 속성(props)에 기본값을 설정하는 메커니즘으로, 부모 컴포넌트가 특정 prop을 제공하지 않았을 때 기본값을 사용할 수 있다. 이를 통해 컴포넌트가 더 유연하게 동작하고, 필수 prop을 지정하지 않아도 된다.

const TestComponent = ({ name }) => {
    return <div>{name}</div>
}

TestComponent.defaultProps = { name: 'kk' }

export default TestComponent

Default Props 사용을 지양해야 하는 이유

1. 누락된 props의 타입 정보 부재: prop이 누락된 경우에 대한 타입 정보가 없다. TypeScript는 명시적인 타입 선언을 통해 모든 props에 대한 타입 정보를 얻을 수 있지만, defaultProps를 사용하면 이 정보가 일부 손실될 수 있다.
2. PropTypes와의 호환성 문제: defaultProps를 정의하면 PropTypes와의 호환성 문제가 발생할 수 있다. TypeScript는 타입 검사를 제공하므로 런타임에서의 PropTypes 사용이 타입 정의와 충돌할 수 있다.
3. 가독성 및 유지보수성 감소: defaultProps를 사용하면 어떤 props을 기대하는지 명확하게 전달할 지에 대한 정보를 제공하지 않아 가독성과 유지보수성이 감소할 수 있다.

 

사실, default props는 class형 컴포넌트에서 props의 default value의 지정의 반복을 줄이기 위해 만들어진 것이라고 한다. 함수형 컴포넌트를 사용할 때는 구조 분해할당으로 props를 분해하여 type을 지정하니 사용할 일이 없지만, 알고 안쓰는 것과 모르고 안쓰는 것의 차이는 분명히 있다고 생각한다.