[React] 클래스 컴포넌트와 함수형 컴포넌트의 차이점과 사용법

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

어떤 컴포넌트는 state정보가 없는 stateless 컴포넌트도 있을 수 있다. 

이들은 오직 props만 갖고 있다.

그리고,

stateless 컴포넌트는 클래스 형태가 아니라 함수(functional) 형태로 작성해야 한다.

stateless = 함수형 컴포넌트

state = 클래스 컴포넌트

class NoState extends Component {

render() {

return (

<p>MoviePoster 컴포넌트입니다</p>

)

}

}

export default NoState;

위와 같이 state를 사용하지 않는 컴포넌트는 클래스를 사용하지 않고

함수형 컴포넌트를 사용한다.

이 컴포넌트들은 그냥 return을 하기 위해 존재한다.(=화면에 뷰를 보여주기 위해 존재한다)

따라서, state뿐만 아니라 리액트 컴포넌트 라이프 사이클조차 필요없다.

사용 못 한다. 사용 안 하는것이 아니라 할 수 없다.

function NoState({title}) {

return(

<img src={title} alt="This is Title image"/>

)

}

정리

함수형 : state 사용 불가 / render() 함수도 없고, 라이프 사이클도 존재하지 않음 / 오직 return만 갖고 있음.

클래스 : state 사용 가능 / render() 함수가 존재, 라이프 사이클도 존재함.

+ 추가

클래스를 함수형 컴포넌트로 변형할때,

export default Movie

도 제거하는 경우가 발생한다.

하지만, 이것은 컴포넌트를 외부에서 사용할 수 있게 선언하는 문장이므로 삭제하면 안된다.

함수형이던, 클래스 형태건 둘 다 컴포넌트이기 때문이다.

이러한 에러가 발생한다. 그렇게 되면 

컴포넌트 하단에 

export default 컴포넌트명

이 존재하는지 확인해 볼 필요가 있다.