사실 React를 예전에 배운적이 있어서 그때 배운 내용대로 그대로 코딩하다보니 Class 선언으로 코딩하고 있었습니다. 특히 최근에 Vanilla Javascript로 코딩하면서 Class를 선언하고 안에서 데이터와 메서드를 처리하다보니 그게 익숙해져서 React에서도 Class형 컴포넌트를 사용하고 있었습니다.
근데 React 공식문서와 여러 블로그를 보면서 느낀게 다들 Function 함수형 컴포넌트를 사용하고 있더라고요... 알아보니 Hook의 등장으로 인해 함수형 컴포넌트를 권장하고 있더라고요. ㅜㅜ 그것도 모르고 class형으로 주구장창 코딩했네요 ㅎㅎ
둘의 차이를 간단하게 설명하자면
- 클래스형 :
- state, lifeCycle 관련 기능사용 가능하다.
- 메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.
- 임의 메서드를 정의할 수 있다.
- 함수형 :
- state, lifeCycle 관련 기능사용 불가능 [Hook을 통해 해결 됨]
- 메모리 자원을 함수형 컴포넌트보다 덜 사용한다.
- 컴포넌트 선언이 편하다.
정도가 있네요..
확실히 Hooks를 써야하고, 공식문서에서도 Class 컴포넌트의 문제점들 때문에 Hooks를 만들어 함수형 컴포넌트 사용을 권장하고 있어요.
- 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다.
- 복잡한 컴포넌트들은 이해하기 어렵다.
- 예를 들면 lifeCycle이 넘 복잡하다
- Class은 사람과 기계를 혼동시킨다.
- this와 같은 코드들은 사람도 헷갈리고 기계도 헷갈린다.
다음과 같은 문제들이 있네요.. 확실히 클래스형에 익숙해져서 몰랐지만 맞는말이에요. Hook을 배워야하지만 오히려 더 편할수도 있겠네요.
지금까지 작성한 코드를 Refactoring하여 블로그를 수정할 계획입니다. 저처럼 클래스형 컴포넌트로 배우신 분들 다들 함수형 컴포넌트에 익숙해지길 바라요~~
프론트엔드 개발 공부 시작합니다~ 같이 공부해요!