[ReactJS] class Component & functional Component

리액트 컴포넌트는 class컴포넌트와 functional 컴포넌트가 있습니다.

class컴포넌트와 functional 컴포넌트에 대하여 간단하게 알아보고 차이점을 알아보겠습니다.

 

 

각 컴포넌트의 구조입니다.

class 컴포넌트에서는 functional 컴포넌트보다 더 많은 기능을 사용할수 있지만 코드가 더 길어지고 복잡해지며 성능이 조금은 느려질수 있습니다.

functional 컴포넌트는 제공하는 기능이 한정적이지만 코드가 간결해지고 성능이 좀더 좋다는 장점이 있습니다.

 

functional 컴포넌트가 아무리 성능이 좋다고 하더라도 기능적으로 못쓰는 것이 많다보니 이전에는 대부분 class 컴포넌트를 사용했었는데요.

 

리액트 16.8버전에서 Hooks라는 것이 업데이트 되고나서는 functional 컴포넌트에서 기능이 확장되었습니다.

왼쪽은 class컴포넌트고 오른쪽은 functional 컴포넌트로 같은 기능을 만들었습니다.

왼쪽의 state를 지정하는것처럼 원래는 functional 컴포넌트에서는 State를 지정해주지 못했지만 이제는 지정해줄수 있도록 바뀌었습니다.

또한 componentDidMount를 이용하여 데이터를 가져오는 것이 가능했는데 이를 라이프사이클이라고 합니다.

이것도 원래는 functional 컴포넌트에서는 못했는데 hooks가 나오고나서는 사용이 가능해졌습니다.

 

과거 작성된 코드는 대부분 class 컴포넌트 방식으로 작성이 되어있지만 최근에 작성되고있는 코드는 대부분이 hook을 사용해서 작성되고 있습니다.