8. Default Props

Default Props

typescript가 아닌 일반 javascript를 사용한 react에서 이전에는 React.PropTypes를 제공해 주었었습니다. 이것은, Props값을 지정해 주지 않았을때 사용할 기본값을 명시해 주는것이었는데, 

이제는 더이상 React패키지에 포함하여 제공해주지 않고 별도의 라이브러리로 제공하고있습니다. -> 선택의 폭 넓어짐 

1. 라이브러리로 제공되는 PropTypes

2. facebook 의 Flow

3. TypeScript

여기서는 이미 typescript를 쓰고 있으므로....

다 넘어가고 typescript에서의 사용법을 알아보겠습니다.

사실 이전 포스팅 6.stateless 에서 이미 default Props를 사용한 부분이 있었습니다.

다시 한번 보겠습니다.

import * as React from 'react';

interface StateLessProps {

name?: string;

}

const defaultProps: StateLessProps = {

name: 'JaroInside'

};

const StatelessComponent: React.SFC<StateLessProps> = (props) => {

return (

<h2>{props.name} - {props.children}</h2>

);

};

StatelessComponent.defaultProps = defaultProps;

export default StatelessComponent;

interface 선언에서 name은 있을수도 없을수도 있다고 명시한후,

아래에서 defaultProps를 명시하여 사용하였습니다.

이미 한가지 방법은 사용해보았네요.

두번째 방법을 보겠습니다.

이번에도 함수형 컴포넌트에서 사용하는 방법입니다.

import * as React from 'react';

interface StateLessProps {

name?: string;

}

const StatelessComponent: React.SFC<StateLessProps> = ({name= 'JaroInside' , children}) => {

return (

<h2>{name} - {children}</h2>

);

};

export default StatelessComponent;

함수 생성시 props 자리에 좀더 상세하게 들어갈것을 명시하면서 값이 지정되지 않을경우 초기값을 넣어주는 형식입니다. 

실행해서 확인해보시기 바랍니다.

물론 실행하실때는 defaultProps를 확인해야 하므로 stateless component를 사용하는 App component에서 넘겨주는 props data를 삭제한뒤 확인 하시기 바랍니다.

마지막으로 class형 component에서의 사용방법입니다.

scr/Parent.tsx 파일에서 사용해 보도록 하겠습니다.

interface ParentProps {

name?: string;

}

interface 선언에서 name에 ? 를 추가해 주세요.

그리고, class 안에서 default값을 선언합니다.

public static defaultProps = {

name: 'Jaro\'s'

};

App component에서 넘겨주는 name 을 삭제해주세요.

실행하여 확인하겠습니다.

만일 App component에서 값을 주입한다면..

주입한 값으로 표시되는것을 확인할수 있습니다.

이번 포스팅에서는 Props에 대한 default 값을 지정하는 법에 대해 포스팅 하였습니다.

공부를 하면서 간단하지만 사용하는 습관을 가져야겠다는 생각이 들었습니다.

다음 포스팅은 상위 컴포넌트에서 하위 컴포넌트 변경,

하위 컴포넌트에서 상위 컴포넌트 변경에 대해 포스팅 할 예정입니다.

이미 상위컴포넌트에서 하위 컴포넌트를 변경하는것은 코드에 있지만, 좀더 깊이 들어간 위치의 컴포넌트 변경을 실습해보려고 합니다.

미리 말씀드리지만, 다음 포스팅은 이러한 스킬을 배우자!! 가 아닌 이렇게 하는게 복잡하니 가능한 피하자.. 라는것을 느끼기 위해 포스팅을 할것입니다.

그럼 다음 포스팅으로 돌아오겠습니다.

이번 포스팅 소스 주소입니다.

https://github.com/JaroInside/tistory-react-typescript-study/tree/8.propstypes

터미널에서

git clone https://github.com/JaroInside/tistory-react-typescript-study.git

cd tistory-react-typescript-study

npm install ( yarn install )

git checkout 8.propstypes

감사합니다.

---

참고 슬라이드 - http://slides.com/woongjae/react-with-typescript-1#/
참고 동영상 - https://www.youtube.com/playlist?list=PLV6pYUAZ-ZoHx0OjUduzaFSZ4_cUqXLm0