라이브러리 생태계의 변화

리액트 팀의 명확한 커뮤니케이션과 댄의 노력 덕분에 훅에 대한 멘탈 모델이 커뮤니티에 서서히 자리 잡기 시작하자, 생태계의 지형도가 바뀌기 시작했다. 변화의 물결은 리액트의 가장 가까운 동맹들로부터 시작되었다.

가장 먼저 움직인 것은 리액트 생태계의 필수 라이브러리 중 하나인 ‘리액트 라우터(React Router)’ 팀이었다.
과거에 개발자들은 현재 URL 정보나 라우팅 히스토리 객체에 접근하기 위해, withRouter라는 HOC를 사용하거나 <Route> 컴포넌트의 렌더 프롭을 이용해야 했다. 이는 HOC와 렌더 프롭이 가진 모든 단점을 고스란히 안고 있는 방식이었다.

리액트 라우터 팀은 훅의 가능성을 즉시 간파했다.
그들은 withRouter를 대체할 새로운 훅들을 발표했다.

• useHistory: 라우팅 히스토리 객체에 접근하여, 프로그래밍 방식으로 페이지를 이동시킬 수 있게 해주는 훅.
• useLocation: 현재 페이지의 위치(URL) 정보를 담은 location 객체를 제공하는 훅.
• useParams: URL의 파라미터(예: /users/:id 에서의 id 값)를 손쉽게 가져올 수 있는 훅.

이제 개발자는 어떤 컴포넌트에서든 단 한 줄의 코드로 라우팅 정보에 접근할 수 있게 되었다.

import { useParams } from 'react-router-dom';

function UserProfilePage() {
  const { id } = useParams(); // URL에서 사용자 ID를 바로 추출!
  // ... 이제 id를 사용해 사용자 정보를 fetch할 수 있다 ...
}

래퍼 지옥도, 콜백 피라미드도 없었다. 리액트 라우터의 사용법이 극적으로 단순해지는 순간이었다.

이러한 변화는 상태 관리 라이브러리 영역에서 더욱 거세게 일어났다.
댄 아브라모프 자신이 만들었던 거대한 라이브러리, Redux 역시 변화의 흐름에 동참했다.

Redux를 리액트 컴포넌트와 연결하기 위해, 개발자들은 connect라는 이름의 강력하지만 복잡한 HOC를 사용해야 했다. mapStateToProps와 mapDispatchToProps라는 두 개의 함수를 작성하여, 스토어의 상태와 액션 디스패치 함수를 컴포넌트의 props로 주입받았다. 이 과정은 수많은 보일러플레이트 코드를 낳았고, 타입스크립트와 함께 사용할 때는 타입 정의가 매우 까다로웠다.

Redux 팀은 이 connect HOC를 대체할 두 개의 훅을 세상에 내놓았다.

• useSelector: 스토어의 상태에서 원하는 데이터만 선택하여 가져올 수 있는 훅.
• useDispatch: 액션을 디스패치할 수 있는 dispatch 함수를 제공하는 훅.

import { useSelector, useDispatch } from 'react-redux';

function CounterComponent() {
  // 스토어 상태에서 count 값을 선택한다.
  const count = useSelector(state => state.counter.value);
  // dispatch 함수를 가져온다.
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  );
}

connect HOC의 복잡한 설정과 보일러플레이트가 완전히 사라졌다. Redux의 사용법이 이보다 더 직관적이고 간결했던 적은 없었다.

리액트 라우터, Redux와 같은 생태계의 핵심 플레이어들이 발 빠르게 훅을 도입하자, 이는 다른 모든 라이브러리 개발자들에게 강력한 신호가 되었다.

‘훅은 거스를 수 없는 대세다.’

스타일링 라이브러리, 폼 관리 라이브러리, 애니메이션 라이브러리 등 수많은 도구들이 앞다투어 훅 기반의 새로운 API를 발표하기 시작했다. 리액트 생태계는 마치 오래된 껍질을 벗고 새로운 모습으로 다시 태어나는 듯했다.

훅은 단순히 리액트 코어의 변화가 아니었다.
그것은 생태계 전체의 구조와 소통 방식을 바꾸는, 거대한 패러다임의 전환이었다. 그리고 이 변화의 가장 큰 수혜자 중에는, 이제 막 리액트의 세계에 발을 들이려는 초심자들이 있었다.