React Hook

기존 React에서 Hook은 16.8부터 추가되었다.
Hook은 기존의 Class 바탕의 코드(Class Component)를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있게 도와준다.

• 선택적 사용 : 기존의 코드를 다시 작성할 필요 없이 컴포넌트 안에서 Hook을 사용할 수 있다.
• 이전 버전과의 호환성 : Hook은 호환성을 깨뜨리는 변화가 없다

프론트 기술들은 날이 갈수록 발전하고 있고, 새롭게 배워 Hook을 포함한 리엑트가 새롭다 하더라도, 개발자들이 더욱 간편하고 편리한 기능을 제공하기 위해 어떠한 기능과 라이브러리들이 추가되고있는지 흐름을 익히면 좋을 것 같다.

React Hook 의 장점

기존 Class Component는 컴포넌트 사이에서의 상태 로직을 재사용하기 어렵다.

이러한 구시대의 패턴은 컴포넌트의 재구성을 요구할 뿐더러 코드 추적이 어렵게 한다.

복잡한 컴포넌트는 이해하기 어려워 진다.

예를들어, 필요한 로직을 넣기 위하여 일정 생명주기 메서드에 로직을 삽입하기도 하는데, 이는 버그가 쉽게 생기고 무결성을 너무나 쉽게 해친다.

JavaScript의 Class & React Class

class를 사용하면서 이벤트 핸들러가 등록되는 방법, this 키워드의 작동 방법 등 코드의 재사용성과 구성을 어렵게하는 요소들은 함수형 컴포넌트에서 Hook을 활용해 각종 React의 기능들을 사용할 수 있게 끔 해준다.

무조건적으로 Functional Component?

다시 돌고 도는 것처럼 느껴질 수 있지만, 그렇지 않다. 아직도 각각의 장점은 존재한다. 직접 몇가지를 짜본다면, 쉽게 느껴볼 수 있다.

Class Component State

클래스 컴포넌트에서 state를 정의하는 과정에서, 여러개의 state 를 눈에 띄게 정의하기 쉽다.

import React, {Component} from 'react'

class Example extends Component{
  state={
    exampleState1 : 0,
    exampleState2 : 1,
    exampleState3 : 2
  }
render(){
  ...
}

이를 함수형 컴포넌트에서 useState() 로 정의하면

import React, { useState } from 'react'

function Example(){
  const [exampleState1, setExampleState1] = useState(0);
  const [exampleState2, setExampleState2] = useState(1);
  const [exampleState3, setExampleState3] = useState(2);
  
  return{
    <div>
    ....
  }

다음과 같이 state의 나열이 반복적이고, 가독성을 낮추기도 한다.

그럼 함수형 컴포넌트가 갖는 이점은?

useState()를 여러번 부를 때 갖는다.

import React, { useState } from 'react'

function Example(){
  const [on, setOn] = useState(false);
  const [count, setCount] = useState(1);
  const lightSwitch = () => setOn(on => !on);
  const addBulbs = () => setCount(count => count + 1);
  
  return{
    <div>
    ....
  }