6. stateless Component

StatelessFunctionalComponent - SFC

component를 만드는 또다른 방법인 function component입니다.

우선 만들어 보겠습니다.

src폴더에 Stateless.tsx파일을 생성해주세요.

그리고 아래 코드를 삽입해 주세요.

import * as React from 'react';

interface StateLessProps {

name?: string;

}

const defaultProps: StateLessProps = {

name: 'JaroInside'

};

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

return (

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

);

};

StatelessComponent.defaultProps = defaultProps;

export default StatelessComponent;

여기서 type을 지정하는데 React.SFC<StateLessProps> 라고 명시하고 있습니다.

원래는 React.StatelessComponent 인데, 줄여서 SFC로 사용 가능합니다.

type SFC<P = {}> = StatelessComponent<P>;

interface StatelessComponent<P = {}> {

(props: P & { children?: ReactNode }, context?: any): ReactElement<any> | null;

propTypes?: ValidationMap<P>;

contextTypes?: ValidationMap<any>;

defaultProps?: Partial<P>;

displayName?: string;

}

자 여기서 interface를 사용하는데, name에 ? 가 있습니다.

?의 뜻은 props가 있을수도, 없을수도 있다는 의미입니다. 따라서 외부에서 넘어오는 props 데이터가 없어도, 오류를 발생시키지 않습니다.

defaultProps는, 만일 외부에서 props 데이터가 오지 않았을 경우, 사용되는 값입니다.

저의 경우에는 블로그 주소인 jaroinside를 사용해보겠습니다.

이러한 함수형 컴포넌트의 경우에는 render함수가 없이 return으로 jsx를 해주면, 그것을 render해주는 방식으로 작동하게 됩니다.

또한 state를 사용하지 않으므로 일반적인 class모양의 component와는 lifecycle이 다릅니다. 

state에 관련된것을 지원하지 않습니다.

component의 lifecycle에 대해서는 다음 포스팅에서 설명하겠습니다.

그럼 이 component를 적용해보겠습니다.

src/App.tsx파일에 컴포넌트를 삽입해보겠습니다.

component부터 import 해주세요.

import StatelessComponent from './Stateless';

그리고 App class의 render부분에 StatelessComponent를 추가합니다.

render() {

const {name} = this.props;

const {age} = this.state;

return (

<div className="App">

<div className="App-header">

<img src={logo} className="App-logo" alt="logo" />

<h2>Welcome to React</h2>

</div>

<h1>Hello {name}</h1>

<h1>age : {age}</h1>

<button onClick={this._addAge}>나이 추가</button>

<StatelessComponent />

</div>

);

}

실행해보겠습니다.

버튼 아래 Component가 추가되어 JaroInside 가 표시되었습니다.

이때 표시된 JaroInside는 props를 외부에서 주지 않았기 때문에, defaultProps가 표시된것입니다.

이번엔 Props를 넣어보겠습니다.

src/App.tsx에서

<StatelessComponent />

부분을

<StatelessComponent name="React-TS"/>

로 변경하고 브라우져를 다시 봐주세요.

이렇게 바뀌었나요?

자 이제 마지막으로 child에 대해서 해보겠습니다.

각 component에서는 children이라는게 있을수도, 없을수도 있습니다.

그렇다면 이 children이 의미하는것은 무엇인가?

코드로 설명하겠습니다!

src/Stateless.tsx 에서 return 값에 children을 표시하게 바꿔주세요

return (

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

);

그리고 src/App.tsx에서 children를 삽입해보겠습니다.

<StatelessComponent name="React-TS">Children</StatelessComponent>

children을 쓰는 곳의 위치에 유의해주세요.

실행화면입니다.

이번 포스팅에서는 StatelessFunctionComponent에 대해 살펴보았습니다.

다음 포스팅에서는 Component의 Lifecycle에 대해 포스팅 하겠습니다.

감사합니다.

이 코드는 https://github.com/JaroInside/tistory-react-typescript-study/tree/6.stateless

에서 확인할수 있습니다.

터미널에서

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

cd tistory-react-typescript-study

npm install ( yarn install )

git checkout 6.stateless

---

참고 슬라이드 - http://slides.com/woongjae/react-with-typescript-1#/

참고 동영상 - https://www.youtube.com/playlist?list=PLV6pYUAZ-ZoHx0OjUduzaFSZ4_cUqXLm0