[React] Hook에 대한 설명 (useState, useEffect, 등장 배경까지)

React Hook

React 공식사이트 참조 : https://ko.reactjs.org/docs/hooks-intro.html

 

Hook 소개

 Hook은 어떤 것이고 왜 나오게 되었을까?

 

Hook이란?

 우선 Hook은 React 16.8 버전에 새로 추가된 최신 기능으로, 클래스형 컴포넌트의 단점을 극복하고자 나온 함수형 컴포넌트에 대한 기능이다. Hook은 함수형 컴포넌트로도 클래스형 컴포넌트의 기능을 사용할 수 있도록 해준다.

 

함수형 컴포넌트란?

// 클래스형 컴포넌트
import React, { Component } from 'react';

class App extends Component {
    render(){
        return (
            //jsx
        );
    }
}

export default App;

// 함수형 컴포넌트
import React from 'react';

function App(){ 
    // 화살표 함수 표현도 가능하다.
    return(
        //jsx
    );
}

export default App;

 클래스형 컴포넌트는 직관적으로 위의 코드와 같은 차이가 있다. 이름 그대로 컴포넌트를 클래스로 구현한 것인지 함수 형태로 구현한 것인지에 따른 차이이다.

 함수형태의 컴포넌트에서 사용되는 몇가지 기술을 Hook이라고 부른다.

 

기존 버전과의 호환

 갑자기 함수형 컴포넌트를 사용하게 된다면 이전 버전과는 호환이 되는걸까? Hook은 일부 컴포넌트에만 적용해도 되고 이전 버전과의 호환성을 깨뜨리는 변화가 전혀 없으므로 사용해도 된다. 아직까지는 클래스형 컴포넌트를 제거하려는 계획도 없으므로 두 형태 모두 혼합해서 사용 가능하다.

 그렇다면 왜 굳이 잘 쓰고 있던 클래스형 컴포넌트를 함수형 컴포넌트로 바꿔야할까?

 

함수형 컴포넌트의 특징

 클래스는 react를 배우는 데에 있어서 큰 진입장벽이었다. 코드의 재사용성과 코드 구성을 어렵게 만들고, this의 사용이나 이벤트 핸들러의 등록 등 기본적인 JS 문법 사항을 알아야 다룰 수 있기 때문이다.

 또한 클래스는 잘 축소되지 않고, reloading을 깨지기 쉽고 신뢰하기 어렵게 만든다. 따라서 react의 최신 기술들이 클래스형 컴포넌트에 효과적으로 적용되지 않았다.

 

정리해보자면 다음과 같다.

1. 클래스의 문법이 어렵다.
2. 축소가 어렵다.
3. reloading의 신뢰성이 떨어진다.
4. 최신 기술의 적용이 효과적이지 않다.

 함수형 컴포넌트는 이러한 단점들을 커버할 수 있다. 하지만 클래스 컴포넌트의 장점인 state 사용이나 life cycle을 직접 다루는 등의 기능을 사용하지 못한다. 이를 해결하기 위해 Hook이 등장했다.

 

Hook의 특징

 Hook은 React 개념에 보다 직관적인 API를 제공한다. 또한 상태에 관련된 로직을 재사용하기 쉽게 만든다.

mixin, HOC, render props 등의 내용 => 정리하기

 

Hook 기능

 Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다. 특징적으로 state와 lifecycle과 같은 기능을 사용 가능하게 해준다.

 

State Hook

 함수형 컴포넌트에서 state를 사용하려면 어떻게 해야할까?

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

useState는 Hook의 기술이다. 함수형 컴포넌트에서는 클래스형 컴포넌트와 같이 state를 사용할 수 없기 때문에, Hook을 사용해서 state와 같은 기능을 할 수 있도록 만들어주었다.

useState는 설정할 state 값과 이 값을 업데이트하는 함수를 쌍으로 제공한다. 이 함수는 클래스 컴포넌트에서의 this.setState와 유사하지만 이전 state와 새로운 state를 합치지 않는다는 차이점이 있다.

useState는 인자로 초기 state 설정값을 하나 받는다. 이 초기값은 첫 번째 렌더링 시에 한 번 사용된다.

 

Effect Hook

 react의 컴포넌트 내에서 데이터를 가져오거나 구독하고, DOM을 조작하는 작업을 side effects 또는 effects라고 한다. 이는 다른 컴포넌트에 영향을 줄 수 도 있고 렌더링 과정에서는 구현 불가능한 작업이기 때문이다.

useEffect는 이러한 side effects를 수행할 수 있도록 해준다. 클래스 컴포넌트의 componentDidMount나 componentDidUpdate, componentWillUnmount와 같이 lifecycle을 다루는 목적으로 제공되지만 이를 하나의 API로 통합하였다는 것이 차이점이다.

 

클래스형 컴포넌트의 life cycle

 react의 원래 lifecycle은 위의 그림과 같다. react 컴포넌트 side effect에는 일반적으로 정리가 필요한 것과 그렇지 않은 것이 있다.

 

정리가 필요하지 않은 effects

 정리가 필요하지 않은 effects는 react가 DOM을 업데이트한 후 추가로 코드를 실행해야하는 경우이다.

componentDidMount() {
    // same code
}
componentDidUpdate() {
    // same code
}

• 클래스 컴포넌트

  클래스 컴포넌트에서는 이러한 side effect를 componentDidMount나 componentDidUpdate 함수로 다룬다. 컴포넌트가 막 마운트되는 단계인지 업데이트되는 단계인지에 따라 둘 중 어떤 함수를 쓸 지가 달라지므로 항상 실행되게 하려면 클래스형 컴포넌트에서는 중복된 코드를 작성해야한다.

 useEffect(() => {
     // same code
 });

• 함수형 컴포넌트

  함수형 컴포넌트에서는 useEffect hook을 사용하여 한번에 나타낼 수 있다. 이 hook은 마운팅과 업데이트의 개념이 없이 렌더링 이후에 매번 수행된다.

 

정리가 필요한 effects

 정리가 필요한 effects는 외부 데이터에 구독을 설정해야하는 경우를 들 수 있다. 이런 경우 메모리 누수가 발생하지 않도록 데이터를 정리하는 것이 매우 중요하다.

• 클래스 컴포넌트

  클래스 컴포넌트에서는 componentDidMount 함수에서 구독을 설정한 후, componentWillUnmount함수에서 이를 정리한다.

• 함수형 컴포넌트

  함수형 컴포넌트에서는 useEffect hook에서 이를 함께 다루어야한다. useEffect에서 정리를 위한 함수는 return으로 반환해줄 수 있다. 따라서 구독의 로직은 useEffect hook 내에 정의하고, 정리를 위한 로직은 return으로 반환해주면 된다.

  따라서 구독이라는 하나의 로직과 관련된 요소가 클래스와는 달리 함수형 컴포넌트에서는 한 곳에 묶여있게 된다.

 이렇게 Hook을 사용하면 클래스형 컴포넌트와는 다르게 생명주기 메서드가 아니라 특정 기준에 따라 로직들을 나눌 수가 있다.

useEffect에서 구독과 정리를 동시에 다룸으로써 하나의 로직을 묶어서 다룰 수는 있게 되었다. 그렇다면 관련이 없는 로직들은 어떻게 구분할까?

useEffect hook도 useState와 같이 여러번 사용할 수 있다. 따라서 다른 hook에 정의함으로써 서로 관련이 없는 로직들은 갈라놓을 수 있다. react는 이 hook들을 지정된 순서에 따라 적용한다.

 

기타 주제

useEffect는 랜더링 때마다 실행되는데, 매번 정리를 하기 때문에 성능이 저하될 수도 있다. 이를 어떻게 해결할까?

 

클래스 컴포넌트에서는 componentDidUpdate 함수의 매개변수로 prevProps와 prevState를 받을 수 있다. 이와 같이 hook에서도 이 두 요소가 변경되지 않았다면 effect를 건너뛰도록 할 수 있다.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); 
// count가 바뀔 때만 effect를 재실행합니다.

이렇게 useEffect의 선택적 인수인 두 번째 인수로 배열을 넘기면 된다. 위의 예제에서 count가 이전 값과 같으면 useEffect는 실행되지 않을 것이다.

 

 

componentDidUpdate 함수는 기존이 어떤 역할이었으며, useEffect로 바뀐 후 어떤 것이 변화했을까?

 

componentDidupdate함수는 클래스형 컴포넌트에서 이전 데이터를 사용하여 버그가 일어나는 경우를 방지하는 역할을 수행한다. 함수형 컴포넌트에서는 useEffect 자체가 업데이트를 다루기 때문에 따로 구성하지 않아도 된다. 업데이트와 동시에 이전 state를 정리해주기 때문이다.

 

Hook의 규칙

1. 최상위에서만 호출해야한다.

반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출하면 안된다. 이 규칙을 따른다면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출된다. 이는 react가 useState와 useEffect를 여러 번 호출하는 중에도 Hook 상태를 유지할 수 있도록 해주기 때문이다.

 

2. 오직 React 함수 내에서만 호출해야한다.

일반적인 JS 함수에서 Hook을 호출하면 안된다.

이 두 규칙을 강제하는 플러그인은 eslint-plugin-react-hooks이고 이를 프로젝트에 추가할 수 있다. Create React App에는 기본적으로 포함되어있다.

 

Hook API

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