[React] React Hooks란 무엇인가?

Copyright © 2020 Facebook Inc.

[React] React Hooks란 무엇인가?

(React 버전 : 16.12.0, 글쓴날 : 2020.02.24)

 

---

* 이 글은 React Hooks에 대한 단순 소개 글입니다.

* 글의 내용은 공식 홈페이지 Hooks 문서를 기반으로 공부하여 작성하였습니다.

* React 버전 16.8.0 이상, React Native 버전 0.59 이상부터 Hooks를 지원합니다.

---

 

 

React Hooks란?

---

1) Hooks 소개

기존 React 컴포넌트들이 작성되던 방식인 Class의 형태는 사람과 기계 양측 모두에게 좋지 않은 점들이 있었고 끊임없이 React 개발자들에게 문제를 야기해왔다고 합니다.

하지만, function을 이용한 함수형 React 컴포넌트에서는 state를 관리하기 어려운 큰 문제점이 있었고 그에 따라 어쩔 수 없이 수많은 레거시 컴포넌트들이 Class로 작성되어 왔습니다.

이러한 문제들을 해결하고자 함수형 컴포넌트에서 state를 관리할 수 있도록 도와주는 recompose라는 라이브러리가 등장하였고, React 팀이 이 recompose를 인수하여 Hooks가 탄생하게 되었습니다.

Hooks의 역할은 대표적으로 useState, useEffect 등과 같은 라이브러리를 제공하여 함수형 React 컴포넌트에서 state를 관리할 수 없었던 문제를 해결하는 것이며, 그로 인해 React 개발자들이 좀 더 함수형 프로그래밍을 지향할 수 있게 되었습니다.

(저도 개인적으로 함수형 프로그래밍을 선호합니다...)

---

2) Hooks의 특징

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

 

(1) 선택적으로 사용하실 수 있습니다.

Hooks의 사용은 선택적이어서 필요하시면 사용하시면 되고, 필요하지 않으시다면 사용하지 않으셔도 전혀 상관이 없습니다.

(2) 이전 버전과의 호환성이 유지됩니다.

Hooks는 이전 버전과 100% 호환성을 유지하므로 걱정하지 않으셔도 됩니다.

(3) 이미 알고 있던 React의 개념에서 벗어나지 않습니다.

props, state, lifecycle 등과 같은 기존 React의 개념과 다르지 않지만, 사용함에 있어 보다 편리하고 직관적인 API를 제공합니다.

---

3) Class 컴포넌트와 Hooks를 도입한 함수형 컴포넌트 비교

간단한 예제를 통해 기존 Class 컴포넌트와 Hooks를 도입한 함수형 컴포넌트의 코드를 비교해 보겠습니다.

(버튼을 눌러 카운트를 올리거나 내리는 예제입니다.)

 

* Class 컴포넌트

import React from "react";
 
class App extends React.Component {
  state = {
    count: 0
  };
 
  incre = () => {
    this.setState(state => {
      return {
        count: state.count + 1
      };
    });
  };
 
  decre = () => {
    this.setState(state => {
      return {
        count: state.count - 1
      };
    });
  };
 
  render() {
    const { count } = this.state;
 
    return (
      <div>
        <p>Count : {count}</p>
        <button onClick={() => this.incre()}>Count +</button>
        <button onClick={() => this.decre()}>Count -</button>
      </div>
    );
  }
}
 
export default App;

 

* Hooks를 도입한 함수형 컴포넌트

import React, { useState } from "react";
 
function App() {
  const [count, setCount] = useState(0);
 
  const incre = () => {
    setCount(count + 1);
  };
 
  const decre = () => {
    setCount(count - 1);
  };
 
  return (
    <div>
      <p>Count : {count}</p>
      <button onClick={() => incre()}>Count +</button>
      <button onClick={() => decre()}>Count -</button>
    </div>
  );
}
 
export default App;

 

어떠신가요? 차이가 느껴지시나요??

위의 두 컴포넌트 모두 똑같은 기능을 하는 똑같은 예제이지만 Class로 컴포넌트를 작성하는 것과 Hooks를 이용해 함수형 컴포넌트를 작성하는 것에는 큰 차이가 존재합니다.

짧고 간단한 예제임에도 불구하고 코드 길이에서부터 확연히 차이가 나는 것을 보실 수 있으며,

비단, 코드 길이뿐만이 아닌 Class로 컴포넌트를 구현할 때 사용해야만 하는 this, setState 등과 같은 피곤하고 귀찮은 문법들 또한 Hooks를 사용하신다면 해결하실 수 있습니다.

---

 

 

---

 

 

여기까지 요새 React 세계의 트렌드인 Hooks에 대하여 알아보았습니다.

저 또한 기존 React 및 React Native 프로그래밍 시 전부 Class로 컴포넌트를 구현했었는데 얼른 Hooks를 공부하여 함수형 컴포넌트로 교체해야겠습니다.

아! 물론, React 개발진의 공식 입장으로 기존의 Class를 제거할 생각은 없다고 하니 Hooks를 굳이 사용하지 않으셔도 되지만, 앞으로 코딩하실 때 점진적으로 Hooks를 사용하길 권장하는 분위기이므로 알아는 두시면 좋을 것 같습니다.

마지막으로, React Hooks에 대해 좀 더 자세히 알고 싶으시거나 문법 등이 궁금하신 분들은...

 

* React 공식 홈페이지 Hooks 문서 : React 공식 홈페이지의 Hooks 문서

Introducing Hooks – React

위의 React 공식 홈페이지 Hooks 문서를 참조하시면 되겠습니다.

감사합니다!