onethegarden_profile
onethegarden Blog

react typescript 에서의 defaultProps

defaultProps를 typescript환경에서 쓸 때 문제가 좀 있어요

회사에서 optional한 값을 parameter로 받아서 구현한 컴포넌트가 있었는데, defaultProps로 구현을 하고 pr을 올렸다.

🙋‍♂️ defaultProps를 typescript환경에서 쓸 때 문제가 좀 있어서요,

라는 리뷰를 받았었다. React.FC에서 defaultProps가 제대로 동작하지 않는다는 이슈는 알고 있었는데, defaultProps에 대한 이슈는 처음 들어봤다.

그래서 해당 내용을 찾아보면서 default parameter로 변경을 했고, 이 내용에 대해 정리해보고자 한다.



먼저, 처음에 올린 pr의 예시 : defaultProps 를 썼다.

interface Props {
  name?: string;
}

function Hello({ name }:Props){
  return(
    <div>hello {name}</div>
  )
}

Hello.defaultProps = {
    name: 'world
}

export default Hello;

리뷰 받고 변경한 내용 : default parameter 로 변경했다.

interface Props {
  name?: string;
}

function Hello({ name = 'world' }:Props){
  return(
    <div>hello {name}</div>
  )
}

export default Hello;


react typescript 에서 defaultProps에 대한 논의

https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11640

defaultProps에 대한 논의 - 2016년에 열려서 2019년에 닫혔다.꽤 오랬동안 진행됐던 걸로 보인다.

typescript3 에서 JSX에서 defaultProps를 지원한다고 하면서 닫혔다.



typescript 3.0 부터 defaultProps를 지원한대요!

typescript 3.0에 jsx에서 defaultProps를 지원한다는 내용이 추가되었다. github - microsoft/typescript

image



앗, 그래도 여전히 남아있는 이슈

하지만, 여전히 문제가 있다. react typescript cheatsheet

If your components Props interface extends another interface, defaultProps still doesn't work in TS3 링크

다른 interface를 상속한 interface를 component의 props로 쓰면 여전히 defaultProps가 동작하지 않는다는 이슈가 있다고 한다.

위 링크에 첨부되어 있는 예시코드에서 한 줄만 추가해서 돌려봤다. el_1 의 경우 defaultProps 가 잘 동작하는 것을 볼 수 있었고, el_2의 경우 GreetComponent의 타입으로 props를 받았음에도 타입추론을 제대로 하지 못하는 것을 알 수 있다.

image



defaultProps deprecate 예정

defaultProps 도 함수형 컴포넌트에서 사용이 중단될 예정이라고 하니 기본 파라미터를 사용하자...

사실 tyepscript 문서에서도 함수형 컴포넌트에서는 default parameter를 사용하라고 한다. functional component에서 defaultProps는 권장되지 않는다고 한다...ㅎㅎ image