[React] React Hooks

React Hooks

React Hooks는 React Conf 2018에서 발표된 class 없이 state를 사용할 수 있는 새로운 기술이다.

 

React Hooks가 필요한 이유

React Hooks는 주로 클래스형 컴포넌트를 사용했던 React에서 발생한 문제점을 해결하기 위해 개발되었다. 

 

React Hooks의 또 다른 이점

왼쪽 코드와 오른쪽 코드를 보면 코드가 훨씬 더 간결해진 걸 볼 수 있다. 클래스형 컴포넌트에서는 생명 주기를 이용할 때 componentDidMount와 ComponentDldupdate 그리고 componentWillUnmount로 서로 다르게 처리하지만, React Hooks를 사용할 때는 useEffect 안에서 한꺼번에 처리할 수 있기 때문이다.

 

HOC(Higher Order Component)

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

위에 보면 A 페이지와 B 페이지가 있는데 두 페이지에서 같은 소스를 사용하는 부분은 유저 리스트를 가져오는 부분이다. 어떤 페이지에서든 유저 리스트를 가져와야 하는 애플리케이션을 만들려고 한다. 하지만 모든 페이지에서 유저 리스트를 가져오기 위해 똑같은 소스를 넣어주면 중복이 많이 생기므로 중복되는 부분은 따로 HOC 컴포넌트를 만든다.

 

유저 리스트를 가져오는 공통적인 부분은 HOC 컴포넌트에 넣어주고 그 HOC 컴포넌트로 각각의 컴포넌트를 감싸주면 모든 컴포넌트에 따로 인증을 위한 부분은 넣어주지 않아도 된다. Hooks가 나오기 전에는 이 방법이 추천되는 방법이었다. 하지만 여기에서도 문제가 있다. 그 문제는 Wrapper 컴포넌트가 끝없이 생길 수 있다는 것이다. 아래 그림처럼 Wrapper가 지나치게 많아지면 데이터 흐름을 파악하기 어려워진다. React Custom Hooks를 이용하면 해당 문제를 해결할 수 있다.