Component의 종류!
Component는 크게 class형 컴포넌트와 함수형 component로 나뉜다 !
1. Class형 컴포넌트
클래스형 컴포넌트의 특징
- class 그리고 component 상속이 필수임
- render가 필수임
- props를 조회할 때 this를 사용함
- state(상태)를 사용함
- life cycle과 method를 이용
클래스형 컴포넌트의 문제점
1. 컴포넌트 상태로직을 재활용하기 어려움
클래스 컴포넌트는 state를 저장할 수 있다는 편의성 덕분에 클래스 컴포넌트가 사용되어 왔으나, 이는 컴포넌트 간의 중복이 많다는 문제점 때문에 규모가 큰 컴포넌트가 만들어 진다. 즉, 유지보수와 테스팅에 불리하다.
👍 이를 보완하기 위해, HOC(Higher Order Component-컴포넌트 안에 컴포넌트 ...)를 사용함!
그랬더니, Wrapper Hell이 발생하여 코드추적이 어려워 졌다. 뜨든..!
2. 혼란을 줄 수 있음
클래스컴포넌트는 방식이 복잡하기도 하고, 특히나 this는 동작방식이 다양해서 예상치 못한 오류가 발생하기도 한다!
2. 함수형 컴포넌트
함수형 컴포넌트의 특징
- state와 life cycle 기능을 사용할 수 없음
- 메모리 자원이 절약됨
그래서 뭐가 함수형 컴포넌트를 쓰려는 이유가 뭔데?
정리하자면!
클래스형 컴포넌트는
1. 생성자에서 state를 정의할 수 있고,
2. setState() 함수를 통해 모든 state를 업데이트하며,
3. Life Cycle method를 제공한다는 특징이 있음!
이러한 특징들은 메모리 자원의 소모가 크다는 단점이 있음 ! (이와 더불어 위에서 확인한 컴포넌트 로직의 재활용이 어렵다는 점과 this동작의 오류발생 가능성도 한 몫함)
함수형 컴포넌트는
1. state를 사용하지 못하고,
2. LifeCycle에 따른 기능 구현이 불가능하다는 특징이 있음!
cf. 만약 컴포넌트가 Life Cycle API를 사용하지 못한다면? 뷰만 렌더링 해주는 역할만 가능!
여기서 잠깐🖐️
함수가 상태를 갖지 못하는 이유는 무엇일까?
함수형 컴포넌트는 리렌더링 될때, 함수 안에 작성된 모든 코드가 다시 실행된다. 이때 기존에 가지고 있던 state를 전혀 관리(기억)하지 못한다!
그랫! 결씸했써! "함수형 컴포넌트가 state와 Life Cycle을 관리할 수 있다면 완전 좋을 것 같은데?!!!! "
그래서 탄생한 것이 바로 바로 바로!
🌸🌸 Hooks !!!! 🌸🌸
to be continue...ㅎ
