📌 History

hook은 recompose 라는 component들을 함수형으로 사용할 수 있도록 하는 라이브러리가 첫 시작이었는데 이 후 React에서 이 라이브러리를 인수하고 개발자는 React팀으로 함께하여 지금의 Hooks 이 출시되었다.

📌 Why hooks?

class와 function을 함께 사용했던 component 개발방식에서 function 기반으로 component를 만들 수 있다.

(기존의 class component, didmount..., render 등을 쓰지 않고도...)

2가지 의미

1. class와 function을 혼용해서 썼던 component 개발방식에서 함수 기반으로만 component를 만들 수 있을 것이다.
2. 상태관리(State Management)를 redux을 쓰지 않고도 '어느정도' 까지는 리액트에서 기본제공되는 방법들을 이용해서 상태관리를 할 수 있을 것이다.

Motivation

React는 당연히 기존처럼 Class를 사용해도 되고, 제거할 계획도 없지만 아래와 같은 이유로, 점진적으로 개발자들이 Hooks를 사용하는 것을 원하는 것 같다.

이유

1. 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다..
2. 복잡한 컴포넌트들은 이해하기 어렵다.
3. Class은 사람과 기계를 혼동시킨다.

so...

hooks 를 사용한다(함수기반의 코드)면 기존의 코드를 조금 더 간결하고 효율적으로 작성 할 수 있을 것이다.

추가로...

App.js 코드가 약간 바뀐 것을 보더라도 리액트는 Hooks 사용을 지향하는 것 같다.

#전

class App extends Component {
  render() {
    return ...
  }
}

export default App

#후

function App() {
  return ...
}

export default App;

📌 Tutorial

ex) 클릭하면 숫자가 0에서 1씩 커지는 버튼

Hooks 을 쓰기 전

import { Component } from "react";
import "./styles.css";

class App extends Component {
  state = {
    count : 0
  };
  addCount = (n) => {
    this.setState({
      count : n
    })
  }

  render() {
    const { count } = this.state;
    return (
      <>
      <div>{count}</div>
      <button onClick={()=> this.addCount(count+1)}>plus</button>
      </>
    );
  }
}

export default App;

Hooks 을 사용

import { Component, useState } from "react";
import "./styles.css";

const App = () => {
  const [count, setCount] = useState(0)
  return (
    <>
    <div>
      {count}
      <button onClick={() => setCount(count+1)}>plus</button>
    </div>
    </>
  )
}

export default App;

🔎 차이점

분명히 코드가 간결해져 가독성이 향상되었다.

const [count, setCount] = useState(0)

useState는 count와 setCount 2가지를 필요로 하는데, 각각 value값과 이를 제어할 함수명이고, 이는 Array 형태.
useState(0) 은 Array 를 return하고 value의 초기값은 0.

More...

조금 몇 가지 기능을 더 추가 해 보면...

import { Component, useState } from "react";
import "./styles.css";

const App = () => {
  const [count, setCount] = useState(0)
  const [email, setEmail] = useState("")
  return (
    <>
    <div>
      {count}
      <button onClick={() => setCount(count+1)}>plus</button>
      <button onClick={() => setCount(count-1)}>minus</button>
      <input placeholder="Email" value={email} />
    </div>
    </>
  )
}

export default App;

👉 input 을 제어하기 위해 onChange 함수를 추가해보면,

import { Component, useState } from "react";
import "./styles.css";

const App = () => {
  const [count, setCount] = useState(0);
  const [email, setEmail] = useState("");
  const updateEmail = e => {
    setEmail(e.target.value)
  }
  return (
    <>
      <div>
        {count}
        <button onClick={() => setCount(count + 1)}>plus</button>
        <button onClick={() => setCount(count - 1)}>minus</button>
        <input placeholder="Email" value={email} onChange={updateEmail} />
      </div>
    </>
  );
};

export default App;

📌 마무리

Hooks을 사용하면 좋은 이유로 가독성을 넘어, 재사용성 측면에서 매우 효율적인 관리가 가능하다고 하는데 조금 더 공부해보고 다시 정리를 해봐야겠다.

📖 참고

React
노마드코더 - 리액트 Hooks 10분만에 사용법 배우기
코드스쿼드 윤지수님 - React Hooks 이해#1

읽어보면 좋을 글
React Hook의 어두운면