22.06.15
React Hooks의 등장 배경
Hooks ?
클래스형 컴포넌트의 고유 기능인 상태관리와 라이프 사이클관리 메서드를
함수형 컴포넌트에서도 쓸 수 있도록 도와주는 함수들의 총칭
상태관리
React는 가상 DOM을 이용해서 변경된 부분만 실제 DOM에 반영해서 렌더링
(props, state의 변경이 일어난 경우 등)
이러한 상태를 관리하기 위해 클래스형 컴포넌트에선 setState같은
상태관리 메서드를 지원
라이프 사이클
[출처: [React] 클래스형 컴포넌트]
Mount 단계
- 컴포넌트 객체가 최초로 생성되어 DOM에 삽입될 때 한 번 실행
Update
- props, state가 변경될 때마다 수행되며 변경사항을 화면에 표시
Unmounting
- 컴포넌트가 DOM에서 제거될 때 호출
Class vs Functional
React V.0.14.0부터 함수형 컴포넌트 (Functional Component) 가능
전통적으로는 State, LifeCycle 관련 기능 필요시 클래스형
Props, UI 렌더링 컴포넌트로 사용한다면 함수형 컴포넌트로 사용했다.
Class형 컴포넌트의 단점
- this 바인딩에 있어서 에러 발생할 가능성이 높아짐
- 코드 재사용성이 떨어짐
- 코드 구성이 복잡
So
클래스형 컴포넌트의 단점들을 해결하고자
함수형 컴포넌트에 state와 lifecycle method 관리 기능을
추가해보자 라는 의견이 제시됨
==> React Hooks의 등장
