React.js - 컴포넌트 (1)

 

 

1. 함수형  컴포넌트 

 

 

2.클래스형 컴포넌트 

 

위 두개 코드들의  역할은  동일하다  하지만 클래스형 컴포넌트와  함수형 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다  그리고 임의 메서드를 정의할 수 있다는 차이점이 있다 

 

그리고  클래스형 컴포넌트에서는 render 함수가 꼭 있어야 한다  그 안에서 보여 주어야 할 JSX를 반환해야 하기 때문이다  

 

함수형 컴포넌트의  장점은 우선 클래스형 컴포넌트보다  선언하기 편하다  메모리 자원도  클래스형  컴포넌트보다  덜 사용한다 또한  프로젝트를 완정하여 빌드한 후 배포할 때도  함수형 컴포넌트를 사용하는 것이 결과물의  파일 크기가  더 작다  단 함수형 컴포넌트의  주요 단점은  앞서 말했듯이  state와  라이프 사이클 API의  사용이 불가능하다는 점이다  물론 이러한 단점은  리액트 업데이트 이후 hook라는 기능이  도입되면서 해결되었다