🔗 Hooks

직역하면 갈고리를 뜻하는 Hooks은 function component에 state관련 함수, lifecycle 관련 함수, 최적화 관련 함수를 Hook을 통해 넣어 줄 수 있다.
이름 앞에 use를 꼭 붙여야한다!!

🔗 Hook이 필요한 이유

초창기부터 class component로 사용되어온 리액트에서 느껴왔던 불편함이나 문제점들을 해결하기 위해서 개발되어 hook은 functional component에 사용한다.

class component의 문제점으로 부터 Hooks 탄생

class component는 더 많은 기능 제공하지만 그로인해 함수형 컴포넌트보다 비교적 더 긴 코드 양, 더 복잡한 코드, 더딘 성능을 보이지만 반대로 함수형 컴포넌트는 클래스형 컴포넌트에 비해 짧은 코드 양, 더 심플한 코드(더 나은 가독성), 더 빠른 성능을 제공한다. 그러나 생명주기를 함수형 컴포넌트에서는 사용을 못했기 때문에 함수형 컴포넌트가 더 간결하고 빠르더라도 클래스형 컴포넌트를 써왔다.

클래스 컴포넌트의 불편함으로 리액트16.8 Hooks 업데이트부터 함수형 컴포넌트에서도 생명주기를 사용할 수 있고, 데이터를 가져오고, 컴포넌트를 시작하자마자 API도 호출하고 많은 부분을 할 수 있게 되었으며 클래스 컴포넌트에서는 생명주기를 이용할때 각 주기마다 다르게 처리를 해주지만 리액트 훅을 사용한 함수형 컴포넌트에서는 useEffect()안에서 다 처리를 해줄 수도 있다.

HOC (Higher Order Component)

화면에서 재사용 가능한 로직만을 분리해서 component로 만들고, 재사용 불가능한 UI와 같은 다른 부분들은 parameter로 받아서 처리하는 방법이다. 즉, 컴포넌트를 인자로 받아서 새로운 리액트 컴포넌트를 리턴하는 함수이다.

HOC컴포넌트를 custom react hooks로 대체해서 많은 wrapper 컴포넌트를 줄이게 되는 것이다. 예를들어 똑같은 리스트를 가져오기 위해 똑같은 소스를 넣어준다면 중복이 많아지기때문에 중복이 되는 부분은 따로 HOC컴포넌트를 만들어 준다.
HOC컴포넌트로 각각의 컴포넌트를 감싸주면 모든 컴포넌트에 따로 인증을 위한 부분은 넣어주지 않아도 된다. export default userHOC( Apage => { } )
Hooks가 나오기 전에는 이 방법이 추천되는 방법이었으나 많은 wrapper컴포넌트가 생길 수 있다는 문제와 wrapper가 너무 많아지면 데이터 흐름을 파악하기 힘들어지기때문에 HOC대신에 따로 custom Hooks를 이용해서 컴포넌트를 만들어서 처리해준다.

🔗 Hooks Lifecycle

어제 작성했던 32일차 블로그에서 클래스컴포넌트에서의 라이프사이클에서 사용된 메서드 중 componentDidMount, componentDidUpdate, componentWillUnmount를 Hooks에서는 useEffect()를 이용해서 처리해준다.