항해99

WIL 4 라이프 사이클 (클래스형 vs 함수형), react hooks api

kongom2 2021. 11. 28. 14:12

초기 리액트 클래스형 라이프사이클 정리 내용

현재 이 개념을 이해하기 위해 많은 시간을 쓸 필요 없음

 

React

생명주기 메서드 ( LifeCycle Method ), only 클래스형 컴포넌트

kongom2.notion.site

 

초기 리액트는 클래스형 컴포넌트에서만 라이프사이클과 State 관리가 가능했었다.

함수형 컴포넌트는 지원되지 않다보니 클래스형의 부수적인 형태로 UI를 표현하는데에만 그쳤었다.

 

클래스형 컴포넌트는 다양한 컴포넌트를 만들 수  있었으나 코드가 복잡한 단점이 있었고,

함수형 컴포넌트는 코드가 간결했지만, 제한된 컴포넌트만 만들 수 밖에 없는 단점이 있었다.

 

함수형 컴포넌트의 장점을 그대로 두고 단점을 보안해 만든
리액트 16.8버전 부터는 모든 컴포넌트를 함수형으로 만들 수 있게 되었고

React Hooks를 이용해 라이프사이클과 State 관리가 가능하게 되었다.

 

특히나 useEffect는 클래스형 컴포넌트의 라이프사이클 처럼 전천후로 사용이 가능하여 코드의 복잡성을 해소해 주었다.