[React.js] React Hook의 등장 배경

React Hook이란?

React 16.8v부터 추가된 기능으로, 클래스 형식의 리액트 컴포넌트에서만 할 수 있었던 state 관리 및 라이프사이클등을 함수형 컴포넌트에서도 사용할 수 있다.

 

기존 클래스 컴포넌트에 대한 불만 사항

extends와 super(props)를 매번 작성해야 하는가?

클래스형 리액트 컴포넌트 사용을 위해서는 extends 키워드를 사용해 React.Component를 상속 받아야한다. 

또한 state를 사용하기 위해서는 constructor 내부 최상단에 super(props)를 해야한다. (자바스크립트 상속 클래스의 규칙)

이렇게 반복되는 코드 작성을 줄일 수는 없을까?

 

다른 언어와는 다른 자바스크립트의 this

class Foo extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button onClick={this.handleClick}>Click Me</button>;
  }
}

자바스크립트의 this는 런타임시 결정된다. 컨텍스트에 따라 this가 바뀌는 자유성 때문에 바인딩이라는 개념을 숙지하고 있어야 한다. render에서 class 메서드를 사용하기 위해서는 constructor 내부에서 바인딩이 필요하다.

(Allow Function ()=> 을 사용하기도 한다.)

 

고차 컴포넌트(HOC, Higher Order Component) 지옥

컴포넌트 로직을 재사용하기 위한 React의 기술로, React의 구성적 특성에서 나오는 패턴이다. Hook이 등장하기 전 함수형 컴포넌트에서 라이플 사이클과 state를 사용할 수 없을 때 사용했던 패턴중 하나이다. 사용법은 아래와 같다.

 

만약 SomeComponent가 마우스 포지션, window 크기, 유저 위치 등의 정보가 필요하다면 아래와 같이 HOC 구조가 발생한다. 이런 구조는 가독성도 좋지않고 element를 찾기 힘들어진다. 

const HocHell = () => {
  return (
    <Hoc1>
      <WithMousePosition>
        <WithWindowSize>
          <WithUserLocation>
            <SomeComponent />
          </WithUserLocation>
        </WithWindowSize>
      </WithMousePosition>
    </Hoc1>
  );
};

함수형 컴포넌트의 Hook을 사용하면 아래와 같이 사용이 가능하다.

const WithHook = () => {
  const mousePosition = useMousePosition()
  const windowSizes = useWindowSize()
  const userLocation = useUserLocation()
  
  return (
    <SomeComponent
      mousePosition={mousePosition}
      windowSizes={windowSizes}
      userLocation={useLocation}
    >
  )
}

 

클래스형 컴포넌트와 Hook이 등장하기 전 함수형 컴포넌트에서 사용하던 HOC는 마우스 포지션(WithMousePosition) 하위의 window의 크기(WithWindowSize) 하위의 유저 위치 정보(WithUserLocation) 하위에 SomeComponent가 존재한다. 즉, 컴포넌트의 차원이 불필요하게 높아진다.

 

하지만 Hook을 사용하면 상위 컴포넌트에서 해당 3가지 기능의 모듈을 불러와 SomeComponent로 전달하기 때문에 두 단계의 차원으로 해결이 가능하다.

 

React Hook의 장점 정리

• 간결한 코드
• 따라서 가독성 향상
• 많은 라이브러리들도 훅으로 지원
• HOC 지옥 해결
• 불필요한 보일러플레이트 코드 제거

 

---

Reference​

React-hook 이 나온 이유와 사용 해야 하는 이유