[React] 클래스 컴포넌트와 함수 컴포넌트 / HOC(Higher Order Component와 React Hook

 

React에서 클래스 컴포넌트를 사용하였던 이유

React의 함수 컴포넌트는 클래스 컴포넌트보다 더 짧고 간결한 코드, 높은 가독성, 더 빠른 성능, 보다 적은 메모리 사용이라는 장점을 가지고 있었지만 상태 관리나 컴포넌트의 생명주기(LifeCycle)를 관리할 수 없다는 단점으로 인해 클래스 컴포넌트를 사용하고 있었습니다.

하지만 React 16.8 버전에서 Hook 이라는 개념이 등장하고 난 뒤로 함수 컴포넌트를 주로 사용하게 되었고, React 에서도 함수 컴포넌트 사용을 권장하게 되었습니다.

상태(State) 관리 👉🏻 useState Hook
생명주기 관리 👉🏻 useEffect Hook

 

React Hook의 또 다른 장점

HOC(Higher Order Component) 란 ?

HOC(Higher-Order-Components)은 컴포넌트를 개발하는 하나의 패턴으로, 컴포넌트를 인자로 받아 새로운 컴포넌트로 변환해 반환하는 함수이다.

HOC란 화면에서 재사용 가능한 로직만을 분리해서 component로 만들고, 재사용 불가능한 UI와 같은 다른 부분들은 parameter로 받아서 처리하는 방법입니다.

위의 A와 B 두 페이지에서 같은 소스를 사용하고 있는 유저 리스트를 가져오는 부분이 중복되어 있음을 알 수 있습니다.

어떠한 페이지에서든 유저 리스트를 가져 와야 하는 애플리케이션을 만든다고 했을 때, 모든 페이지에서 유저 리스트를 가져오기 위해서 똑같은 소스코드를 넣어준다면 너무 많은 중복이 되기 때문에 중복이 되는 부분은 따로 HOC컴포넌트로 만들어 줄 수 있습니다.

유저 리스트를 가져오는 공통적인 부분은 HOC 컴포넌트에 넣어주고 그 HOC 컴포넌트로 각각의 컴포넌트를 감싸주면 모든 컴포넌트에 따로 중복되는 부분은 넣어주지 않아도 됩니다.

Hooks가 나오기 전에는 이 방법이 추천되는 방법이였지만 너무나 많은 Wrapper 컴포넌트가 생길수 있다는 문제점이 있었습니다.

React Custom Hook(사용자 정의 Hook)

위에서 언급한 Wrapper가 너무 많아 질 수 있다는 HOC의 문제점을 Custom Hook을 통해 해결할 수 있습니다.

 

React Custom Hook을 생성하면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있습니다.

 

두 개의 자바스크립트 함수에서 같은 로직을 공유하고자 할 때는 또 다른 함수로 분리합니다. 컴포넌트와 Hook 또한 함수이기 때문에 같은 방법을 사용할 수 있습니다.

 

사용자 정의 Hook은 이름이 use로 시작하는 "자바스크립트 함수"입니다. 사용자 Hook은 다른 Hook을 호출할 수 있습니다.(출처 : React 공식문서)

 

React 컴포넌트와는 다르게 사용자 정의 Hook은 특정한 시그니처가 필요 없습니다. 무엇을 인수로 받아야 하며 필요하다면 무엇을 반환해야 하는 지를 사용자가 결정할 수 있습니다.

 

이름은 반드시 use로 시작해야 하는데 그래야만 한눈에 보아도 Hook 규칙이 적용되는지를 파악할 수 있기 때문입니다.