React Hooks을 사용하는 이유

https://ko.reactjs.org/docs/hooks-intro.html

Hook의 개요 – React

Hook은

props, state, context, refs, 그리고 lifecycle와 같은 React 개념에

좀 더 직관적인 API를 제공합니다. 

 

 

Hooks을 사용하는 이유

1_ 컴포넌트 사이에서 상태로직을 재사용하기 어렵기 때문에

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

 

2_ lifeCycle로 인한 중복로직을 피하기 위해서

생명주기 메서드에는 자주 관련 없는 로직이 섞여들어가고는 한다. 예시로 componentDidMount 와 componentDidUpdate는 컴포넌트안에서 데이터를 가져오는 작업을 수행할 때 사용 되어야 하지만, 같은 componentDidMount에서 이벤트 리스너를 설정하는 것과 같은 관계없는 로직이 포함되기도 하며, componentWillUnmount에서 cleanup 로직을 수행하기도 한다

 

Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있다. 

또한 리듀서를 활용해 컴포넌트의 지역 상태 값을 관리하도록 할 수 있다.

 

아래 예시는 라이프 사이클에 중복된 로직을 사용하는 경우

class Example extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    count: 0
  };
  }
  componentDidMount() {
      document.title = `You clicked ${this.state.count} times`;
  }
  componentDidUpdate() {
      document.title = `You clicked ${this.state.count} times`;
  }
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
        Click me
        </button>
      </div>
    );
  }
}

 

위의 코드를 react Hook의 useEffect를 사용하여 라이프사이클을 통합한 예제이다

import { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
      Click me
      </button>
    </div>
  );
}

 

( 예제 출처 : https://reactiver.dev/why-react-hooks/ )

Hook인 useEffect를 사용하니 lifeCycle의 중복로직 문제가 해결된 것을 볼 수 있다

 

 

 

3_ class의 this키워드로 인한 문제

React 에서의 Class 사용을 위해서는 JavaScript의 this 키워드가 어떻게 작동하는지 알아야만 한다.

JavaScript의 this키워드는 대부분의 다른 언어에서와는 다르게 작동함으로 사용자에게 큰 혼란을 주었으며, 코드의 재사용성과 구성을 매우 어렵게 만들었다. 사용자들은 props, state, 그리고 top-down 데이터 흐름을 완벽하게 하고도, Class의 이해에는 어려움을 겪고는 했다.

 

이러한 문제를 해결하기 위해, Hook은 Class없이 React 기능들을 사용하는 방법을 제시한다. 

개념적으로 React 컴포넌트는 함수에 더 가까워 사용자가 이해하기 쉽다.

 

 

 

 

💬💬💬

무작정 hook을 공부하는 것도 좋지만 어떤 이유에서 hook이 만들어졌는지 이해하면 언어의 전반적인 흐름 이해에 도움이 될거라 생각해 찾아보았다. 공식문서의 모든 내용을 이해하지는 못했지만 FaceBook이 어떤 이유에서 React에 Hook을 도입했는지 조금은 이해했다.  정확한 이해를 위해서는 자바스크립트까지 조금 더 공부를 하고 다시 정리를 해보면 좋겠다는 생각을 해봤다.