[React] Hook 소개

Hook의 개요

Hook을 이용하여 Class를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.

 

import React, { useState } from 'react';

function Example() {
  // "count"라는 새로운 상태 값을 정의합니다.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

 

useState라는 새로운 함수는 우리가 "Hook"에서 처음 배우게 될 함수입니다.

이 페이지에서는 왜 우리가 Hook을 React에 추가했는지, 그리고 어떻게 Hook이 어떤 도움을 주는지 설명할 것입니다.

 

Hook의 특징은 다음과 같습니다.

 

1. 선택적 사용

기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있습니다.

그러나 만약 당장 Hook이 필요 없다면, Hook을 사용할 필요는 없습니다.

 

2. 100% 호환성

Hook은 이전 버전과 호환성을 깨뜨리는 변화가 없습니다.

 

3. 현재 사용 가능

Hook은 현재 배포 버전(v16.8.0)에서 사용할 수 있습니다.

 

React에서 Class를 제거할 계획은 없습니다.

 

Hook은 알고 있는 React 컨셉을 대체하지 않습니다.

대신에 Hook은 props, state, context, refs, 그리고 lifecycle과 같은 React 개념에 좀 더 직관적인 API를 제공합니다.

또한 Hook은 이 개념들을 엮기 위해 새로운 강력한 방법을 제공합니다.

 

단지 Hook에 대해 배우길 원한다면, 다음 페이지로 이동하세요.

왜 Hook이 필요한지, 어떻게 앱을 다시 작성할 필요 없이 Hook을 이용하는지 알고 싶다면 이 페이지를 계속 읽어주세요.

 

동기

Hook은 5년동안 우리가 React에서 수만개의 컴포넌트를 유지하고 작성하는데 만났던 표면상 연결되지 않은 넓고 다양한 문제들을 해결했습니다. React를 배우는 중이든, 매일 사용하든, 심지어 비슷한 컴포넌트 모델과 함께 다른 라이브러리를 선호하는 간에, 이러한 문제 중 일부를 인식할 수 있습니다.

 

컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵습니다.

React는 컴포넌트에 재사용 가능한 행동을 붙이는 방법을 제공하지 않습니다.

(예를 들어 스토어에 컴포넌트를 연결하는 것)

만약 이전부터 React를 사용해왔다면, 이것을 해결하기 위해 render props 그리고 고차 컴포넌트같은 패턴에 익숙할 것입니다.

그러나 이런 패턴을 사용할 때 컴포넌트를 재구성해야 하며 코드를 추적하기 어렵게 만듭니다.

React 개발자 도구에서 전형적인 React 애플리케이션을 본다면, providers, consumers, 고차 컴포넌트, render props 그리고 다른 추상화에 대한 레이어로 둘러싸인 "래퍼 지옥(wrapper hell)"을 볼 가능성이 높습니다.

개발자 도구에서 걸러낼 수 있지만, 중요한건 더 깊은 문제입니다.

React는 상태 관련 로직을 공유하기 위해 좀 더 좋은 기초 요소가 필요합니다.

 

Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있습니다.

이것은 독립적인 테스트와 재사용이 가능합니다.

Hook은 계층 변화없이 상태 관련 로직을 재사용할 수 있도록 도와줍니다.

이것은 많은 컴포넌트 혹은 커뮤니티 사이에서 Hook을 공유하기 쉬워지게 만듭니다.

 

복잡한 컴포넌트들은 이해하기 어렵습니다.

우리는 때론 간단하게 시작했지만 유지하기 힘든 상태 관련 로직들과 사이드 이펙트가 있는 컴포넌트들을 유지해야 합니다.  각 생명주기 메서드는 자주 관련 없는 로직이 섞여있습니다. 예를 들어, 컴포넌트들은 componentDidMount 그리고 componentDidUpdate로 데이터를 가져오는 것을 수행할 수도 있습니다. 그러나 같은 componentDidMount 메서드라도 이벤트 리스너를 설정하는 것과 같은 관계없는 일부 로직이 포함될 수도 있으며, componentWillUnmount에서 cleanUp을 수행하기도 합니다. 함께 변경되는 상호 관련 코드는 분리되지만 이와 연관 없는 코드들은 단일 메서드로 결합합니다. 이로 인해 버그가 쉽게 발생하고 무결성을 너무나 쉽게 해칩니다.

 

위와 같은 사례 안에서 상태 관련 로직이 모든 공간에 있기 째문에 이러한 컴포넌트들을 작게 만드는 것은 불가능합니다. 또한 테스트하기도 어렵습니다. 이것은 많은 사람이 React를 별도의 상태 관리 라이브러리와 함께 결합해서 사용하는 이유 중 하나입니다. 그러나, 상태 관리 라이브러리는 종종 너무 많은 추상화를 하고, 다른 파일들 사이에서 건너뛰기를 요구하며 컴포넌트 재사용을 더욱더 어렵게 만듭니다.

 

이것을 해결하기 위해, 생명주기 메서드를 기반으로 쪼개는데 초점을 맞추기보다는, Hook을 통해 로직에 기반을 둔 작은 함수로 컴포넌트를 나눈 수 있습니다. (구독 설정 및 데이터를 불러오는 것과 같은 로직) 조금 더 예측할 수 있도록 하기 위해 리듀서를 활용해 컴포넌트의 지역 상태 값을 관리하도록 할 수 있습니다.

 

나중에 Effect Hook에서 더 알아볼 것입니다.

 

Class는 사람과 기계를 혼동시킵니다.

Class가 코드의 재사용성과 코드 구성을 좀 더 어렵게 만들 뿐만 아니라, React를 배우는데 큰 진입장벽이라는 것을 알게 되었습니다. JavaScript에서 어떻게 this가 작동하는지 알아야만 했고, 대부분의 다른 언어와는 다르게 작동합니다. 이벤트 핸들러가 등록되는 방법을 기억해야만 합니다. 불안정한 문법 제안들이 없다면, 코드는 매우 장황해집니다. 사람들은 props, state, 그리고 top-down 데이터 흐름을 완벽하게 이해할 수 있지만, 여전히 Class는 쉽지 않습니다. React 안에서의 함수와 컴포넌트들을 구별하고 각 요소를 언제 사용하는지는 숙련된 React 개발자 사이에서도 의견이 일치하지 않습니다.

 

게다가, React는 5년 동안 지속하여 왔으며, 우리는 5년 뒤에도 이것이 유지되기를 바랍니다. 특별하게 템플릿에 제한을 두지 않는다면, Svelte, Angular, Glimmer, 사전 컴파일 컴포넌트는 잠재적인 능력을 갖추고 있습니다. 최근 Prepack을 사용한 컴포넌트 folding에 대해서 실험해왔고, 긍정적인 결과를 보았습니다. 그러나, Class 컴포넌트가 이러한 최적화를 더 느린 경로로 되돌리는 의도하지 않은 패턴을 장려할 수 있다는 것을 발견했습니다. Class는 최근 사용되는 도구에도 많은 문제를 일으킵니다. 예를 들어 Class는 잘 축소되지 않고, 핫 리로딩을 깨지기 쉽고 신뢰할 수 없게 만듭니다. 우리는 코드가 최적화 가능한 경로에서 유지될 가능성이 더 높은 API를 제공하고 싶습니다.

 

이러한 문제를 해결하기 위해, Hook은 Class없이 React 기능들을 사용하는 방법을 알려줍니다. 개념적으로 React 컴포넌트는 항상 함수에 더 까깝습니다. Hook은 React의 정신을 침해하지 않고 함수를 받아들입니다. Hook은 명령형 코드로 해결책을 찾을 수 있게 해주며 복잡한 함수형 또는 반응형 프로그래밍 기술을 배우도록 요구하지 않습니다.