[리액트] React hook 간단하게 알아보기

 

참고) 한국어 버전 공식 문서이다.

Hook의 개요 – React

A JavaScript library for building user interfaces

ko.reactjs.org

이는 단순히 리액트 hook을 공부한 지 얼마 안 된 나의 생각을 정리하고자 쓴 글이다.

틀린 부분이 있을 수도 있으니 항상 공부는 공식 문서로!

---

React hook은 16.8 버전에 새로 추가되었다. 콘퍼런스 영상을 보니 한 2년 전이다.

​

우선 리액트 훅을 배운지 정말 얼마 안 되었지만 벌써 이렇게 좋아진 이유는

코드가 간단하다. (아주아주 심플해짐)

​

class App extends React.Component에서 드디어 탈출이 가능하다.

state는 간단히 useState를 사용하여 나타낼 수 있게 되었다.

​

말보다 코드가 훨씬 와닿을 것이다.

밑에 두 예제는 버튼을 클릭하여 숫자를 늘리는 것이다.

Click me 버튼을 눌리면 숫자가 0에서 1,2,3, ... 증가한다.

​

<리액트 훅 사용 전>

import { render } from 'react-dom';
import React, { Component } from 'react';

class App extends Component {
  state = {
    counter: 0
  };
  handleClick = () => {
    this.setState({
      counter: this.state.counter + 1
    });
  };
  render() {
    return (
      <div>
        <p>{this.state.counter} </p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

<리액트 훅 사용 후>

import { render } from 'react-dom';
import React, { useState } from 'react';

const App = () => {
  const [count, setCount] = useState(0);

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

render(<App />, document.getElementById('root'));

코드 양도 줄었고 가독성도 훨씬 좋아졌다!!

​

---

​

​

​

문득 왜 리액트 훅을 추가했는지 궁금했다. (물론 효과가 대단하다는 것은 알고 있지만!)

찾아보니 공식 문서에는 친절히 동기까지 나와있다.

​

크게 세 가지 이유가 있다.

​

- Wrapper hell(래퍼 지옥)

React Hooks: Why We should Embrace it (Jacky Efendi)

래퍼 지옥 밈을 들고 왔다. ㅋㅋㅋㅋㅋ

정말.. Wrapper(<>로 시작해서 </>로 끝나는 것들)가 많지 않은가?

​

Hooks를 사용하면 상태 관련 로직을 추상화할 수 있고,

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

​

---

​

- 생명주기 함수

​

참고) 리액트 생명주기 함수 다이어그램이다.

React Lifecycle Methods diagram

Fully interactive and accessible React Lifecycle Methods diagram.

projects.wojtekmaj.pl

 

컴포넌트들은 componentDidMount 그리고 componentDidUpdate로 데이터를 가져오는 것을 수행할 수도 있습니다. 그러나, 같은 componentDidMount 메서드라도 이벤트 리스너를 설정하는 것과 같은 관계없는 일부 로직이 포함될 수도 있으며, componentWillUnmount에서 cleanup을 수행하기도 합니다. 함께 변경되는 상호 관련 코드는 분리되지만 이와 연관 없는 코드들은 단일 메서드로 결합합니다. 이로 인해 버그가 쉽게 발생하고 무결성을 너무나 쉽게 해칩니다.

​

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

리액트 공식 문서

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

난 생명주기 함수가 아직도 어렵다 (아직 배운 지 한 달도 안 되었긴 하지만,)

이름도 길고 크게 와닿지 않는 개념이었다.

​

하지만 이 또한 리액트 훅의 등장 이후로 useEffect를 사용하면 된다.

코드도 더 간결해지고 가독성도 좋아진다.

​

---

​

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

Class를 혼동하는 건 나 혼자일 줄 알았는데.. 다른 사람과 기계도 혼동 시키는구나..

​

Class를 사용하면 코드의 재사용성이 낮아지고, 코드 구성을 어렵게 만든다.

그리고 React를 배우는 진입장벽으로 작용했다.

자바스크립트에서 다른 언어들과 다르게 작동하는 this를 알아야 했고, bind부터 이벤트 핸들러 등록 방법 등.. 알아야 할 게 많았다. 코드는 장황해지고 입문자는 더욱 React 사용이 어렵다고 느꼈다ㅠㅠ

​

이 문제를 해결하기 위해 Hook은 Class 없이 React 기능 사용 방법을 알려준다.

React 컴포넌트를 함수형으로 만들어서 예시를 보여준다!!

Hook 개요 – React

A JavaScript library for building user interfaces

ko.reactjs.org

​

​

아직까지 React에서 Class 제거 계획은 없다고 한다.

하지만 Class의 개념이 어렵고 처음 배우는 입문자들에겐 React hook으로 배우는 것이

더 좋을 거 같다고 생각한다.