패스트캠퍼스 데브캠프

김민태의 데브캠프 2기 - React Hooks란?

vitamin3000 2024. 11. 6. 14:55

class없이 state를 사용할 수 있는 기능

 

React Hooks가 필요한 이유

Class Component : 더 많은 기능 제공, 더 긴 코드 양, 더 복잡한 코드, 더딘 성능
Functional Component : 더 적은 기능 제공, 짧은 코드 양 , 더 심플한 코드, 더 빠른 성능


함수형 컴포넌트는 어떤 기능을 쓰지 못하는 것인가?

 

출처 : 김민태의 프론트엔드 데브캠프 강의

 

 


이렇게나 중요한 생명 주기를 함수형 컴포넌트에서 사용하지 못했기 떄문에 클래스형 컴포넌트를 사용


하지만 React Hooks가 업데이트되면서, 함수형 컴포넌트에서도 생명주기를 사용하여 데이터를 가져오거나 API 호출등 많은 부분을 클래스에서는 componentDidMount, componentDidUpdate, componentWillUnmount에 해당하는 작업을 함수형에서는 useEffect 안에서 다 처리할 수 있게 되었다.
크게, HOC 컴포넌트를 Custom React Hooks로 대체하여 많은 Wrapper 컴포넌트를 줄일 수 있다.

HOC(Higher Order Component)란?


화면에서 재사용 가능한 로직만을 분리해서, component로 만들고, 재사용 불가능한 UI와 같은 부분들은


parameter로 받아서 처리하는 방법