[React.js] #9 hook이란 무엇일까?!

 

 

기존에 Class형 컴포넌트에서 사용하던 상태 값 관리와 Life-cycle 메서드와 같은 기능을 React 16.8 버전에 새로 추가되어 Hook이란 기능을 통해 함수형 컴포넌트에서도 사용할 수 있게 되었습니다.

 

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>
  );
}

 

왜? React에서는 기존 클래스형 컴포넌트 외에 Hook이란 기능을 만들게 되었을까요

 

 

소개 영상

 

아래 링크는 Hook에 대한 소개 영상이니 궁금하신 분은 참고 바랍니다.

 

 

React팀에서는 다음과 같은 이유로 Hook을 개발하였다고 합니다.

 

 

1. 컴포넌트 사이에서 상태와 관련된 로직 재사용에 대한 어려움

 

- 기존 React에서는 컴포넌트에 재사용 가능한 액션을 위해 HoC(High Oerder Componet), render props와 같은 다양한 패턴 기법이 사용되며 이들은 코드 재사용에 대한 불편함과 복잡도를 올리고 있다고 말합니다. 이들을 사용하기 위해서는 wrapper를 통해 사용해야 하였고 코드의 복잡도가 계속 높아지는 결과를 낳았습니다. 

 

 

2. 복잡한 컴포넌트들을 이해하기 어려움

 

-  예를 들어 Life-Cycle 경우 componentDidMount() 혹은  componentDidUpdate() 등의 함수에서는 하나의 로직만을 담당하지는 않습니다. 초기 데이터를 불러오거나 로그인 상태를 관리할 수도 있으며 다른 추가적인 기능을 하는 함수들이 모두 하나의 메서드에서 작동하게 됩니다. 이것들은 버그를 발생시키고 무결성을 떨어트리게 됩니다. Hook을 통해 로직을 기반의 함수들로 컴포넌트를 나눌 수 있도록 하였습니다.

 

 

3. Class는 사람과 기계를 혼동시킨다.

 

- Clas는 코드의 재사용성과 코드 구성을 좀 더 어렵게 만들며 React를 학습에 있어 진입장벽이 된다고 판단하였습니다. this의 사용과 이벤트 핸들러의 사용방법 등 코드를 매우 장황하게 만들며 리액트에서 제공하는 props, state, top-down의 데이터 흐름은 이해하지만 Class를 이해하는 것에 대해 어려움이 많다고 느꼈다고 합니다. 이를 해결하기 위해 Hook은 Class 없이 React 기능들을 사용할 수 있

 

 

Hook의 특징

- 선택적 사용 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있습니다. 그러나 만약 당장 Hook이 필요 없다면, Hook을 사용할 필요는 없습니다.

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

- 현재 사용 가능 Hook은 배포 v16.8.0에서 사용할 수 있습니다.

 

기존에 사용하던 Class 컴포넌트는 사라지지 않고 유지될 예정입니다.

 

기존의 코드와 Hook은 여전히 혼용하여 사용할 수 있습니다. Hook으로의 이동을 서두를 필요 없으며 이미 Class 컴포넌트들을 사용하는 경우 규모가 큰 리펙토링은 피하기를 권장한다고 합니다.

 

 

이렇게 간단하게 Hook이 왜 발생하게 되었는지 어떤 기능을 보완해주고 있는지에 대하여 알아보았습니다.

더 자세한 내용은 여기에서 확인 가능합니다.

 

다음 포스팅에서는 Hook의 기능들을 하나씩 살펴보며 어떻게 활용하면 좋을지 알아보도록 하겠습니다.

 

 

탕빠이!