[React JS]똑똑한 컴포넌트와 멍청한 컴포넌트

모든 컴포넌트가 state가 있는 것은 아니다.

어떤 컴포넌트는 state이 없는 stateless functional 컴포넌트다.

이 두개의 컴포넌트는 큰 차이점이 있다.

한개는 state이 있고, 나머지 한개는 state이 없고, 필요하지도 않는다.

이걸 dumb(멍청한) 컴포넌트 그리고 smart(똑똑한) 컴포넌트라고 해.

그들이 갖고 있는 것은 props 뿐이다.

state이 없고 props밖에 없을때는 클래스 컴포넌트를 쓰는 대신에 

예를 들어보자

위 코드를 아래와 같이 바꿔보았다.

1개의 props만 있고, 1개의 html 태그만 필요하다

({poster}를 뜻함) 

이렇게 functional 컴포넌트를 만드는 것이다.

기억해야할 규칙은 이들은 state가 없고,

function render 없고, 라이프사이클도 없다.

그들이 갖고 있는 것은 오직 return밖에 없다.

그렇다면 이렇게 바꿨을 때,

어떻게 prop-types를 사용할까?

아주 간단하다

이렇게 추가하면 된다.

이전보다 더 간단하게 코드를 작성할 수 있다.

이번엔 movie 컴포넌트를 functional로 변경해보자.

아주 간단하게 바꾸었다.

컴포넌트를 function으로 변경하니 코드도 간결해졌다.

이때 주의할점은 맨 첫번째 줄에서 원래는 mport React, { Component } from 'react'; 이것이였는데,

이제 더 이상 컴포넌트를 사용하지 않기 때문에,

import React from 'react'; 이렇게 바꿔주었다.

그리고 또 주의할점은 

functional 컴포넌트에서는 this props를 삭제해줘야한다. 왜냐면 클래스가 아니니까!

클래스들은 그 안에 this라는 키워드가 있다.

하지만 이건 functional 컴포넌트라서 this가 필요없다.

이미 props를 쓰니까

이게 똑똑한 컴포넌트와 스마트한 컴포넌트의 차이이다.

똑똑한 컴포넌트는 state가 있고,

멍청한 컴포넌트는 state가 없다.

너가 functional 컴포넌트 (멍청한)를 갖고 있으면,

render function, will mount, did mount 등등 다 필요없다.

html을 return해야할 뿐이다.

하지만 state를 잃게 되지.

업데이트 하고, 그런 멋진 것들이 다 사라진다.

무비 포스터와 같은 컴포넌트에는 사용해도 무방하다.