React 함수 컴포넌트와 클래스 컴포넌트

간단정리

 

과거의 React는 클래스 컴포넌트는 state를 가질 수 있었고, 함수 컴포넌트는 state를 가질 수 없었습니다.

즉 상태를 가지느냐 아니냐 에 따라서 그 용도가 정해져 있었습니다.

 

class컴포넌트를 사용할 경우 lifeCycle 또한 사용할 수 있었지만 함수는 아니었습니다.

반면 단점으로는 메서드를 항상 this를 바인딩해야하는 문제와 메서드와 state에 접근할 때 마다 this 키워드를 붙여야하는 등 함수형 컴포넌트보다 문법적으로 복잡하고 길었습니다

그래서 함수 컴포넌트에 없는 state와 lifeCyle를 부여하기 위해서 hook 이나왔습니다.

hook은 재사용가능한 단위로 묶어내면서 state를 컴포넌트마다 관리할 수 있고, lifeCyle또한 구현이 가능하게 해주었습니다.

이제는 함수 컴포넌트가 클래스 컴포넌트보다 코드가 짧고, 복잡하지도 않고, hook을 통한 재사용성 증가 한 특징을 가지게 되었습니다.

 

어떤 방식을 사용하던 선택의 자유이지만, 이런 강력한 장점들로 인해서 많은 React개발자들이 함수 컴포넌트를 사용하고있습니다.

하지만 class로 작성하는 방법도 알고있어야합니다. 모든 사람의 선택은 동일한게 아니기 때문에, 내가 필요한 코드가 클래스 컴포넌트로 작성되었을 수 있으니까요