React Hook이란?

React의 Side Effect와 State 관리

---

 

React의 Side Effect

---

React Component를 화면에 렌더링 될 때를 생각해보자. 코드를 실행하는 과정에서 외부 데이터를 호출할 때 기다리고, 받은 데이터를 출력하고 다시 외부 데이터를 호출하며 기다리고, 다시 그렇게 받은 데이터를 출력하고... 이를 반복한다면 실행 속도가 굉장히 늦어질 것이다.

 

때문에 일단 화면에 렌더링 할 수 있는 것들을 먼저 렌더링 한 뒤, 나중에 받은 데이터를 비동기식으로 가져오는 것이 권장된다. 이렇게 해야 연동하는 API 응답이 늦어지거나 응답이 없는 경우에도 영향을 최소화할 수 있기 때문에 사용자 경험 측면에서 유리하기 때문이다. 이처럼 'React Component를 화면에 1차로 렌더링 한 후, 비동기식으로 처리되는 부수적인 효과'를 보고 Side Effect라고 칭한다.

 

리액트에서는 이 사이드 이펙트를 생명주기 메소드를 통해 구현하고 있었다. Mounting 단계의 componentDidMount, Updating 단계의 componentDidUpdate와 같은 것이 바로 그 메소드다. 컴포넌트가 렌더링 된 후에 실행되는 메소드라는 점에서 권장사항에 부합하는 메소드들이라는 것을 알 수 있다.

 

React의 State 관리

---

React의 State의 값은 '상태'라는 이름에 걸맞게 렌더링에 영향을 미치는 값이다. 우리가 state 값을 변경한다면 리액트는 이를 감지하고 화면을 리렌더링하게 된다. 때문에 우리는 Mounting 단계에서 constructor 메소드를 이용해 초기 state를 설정해두고, state의 변경이 있을 때마다 setState를 이용해 state 값을 변경한다.

 

문제점

---

리액트에서 앞서 말한 사이드 이펙트 구현과 상태 관리 구현은 생명주기 메소드를 통해 이루어진다. 문제는 이 생명주기 메소드는 클래스형 컴포넌트에서만 이용할 수 있다는 점이다. 하지만 클래스형 컴포넌트는 많은 단점이 존재한다. 코드 구성과 최적화도 힘들고, 코드의 재사용성도 떨어진다. 그렇다면 사이드 이펙트 구현과 상태 관리 구현을 위해 함수형 컴포넌트의 편리함을 포기해야 하는 것일까?

 

 

 

Hook의 등장

---

이런 문제점을 해결하기 위해 나온 것이 바로 Hook이라는 개념이다. 지난 2019년 공개된 리액트 16.8 버전에는 Hook기능이 추가되었다. Hook을 통해 앞서 이야기한 사이드 이펙트와 상태 관리를 비롯한 여러 기능들을 구현할 수 있게 되었다. 간단한 예를 살펴보자. 기존 클래스형 컴포넌트 방식으로 state를 관리하기 위해서는 다음과 같이 코드를 작성해야 했다.

 

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

코드는 리액트 공식 홈페이지의 예시 코드다. 위 코드는 버튼을 한번 클릭할 시, count 변수에 1이 더해지고 이를 화면에 출력하는 구조다. 위와 같이 코드를 작성하면 constructor 메소드를 통해 state 값을 정의해주고, render 메소드를 통해 렌더링 해줘야 한다. 하지만 함수형 컴포넌트와 hook을 사용한다면 훨씬 간결해진 코드를 작성할 수 있다.

 

import React, { useState } from 'react';

function Example() {
  // "count"라는 새로운 상태 값을 정의합니다.
  const [count, setCount] = useState(0);

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

constructor 메소드를 길게 작성하는 대신, const [count, setCount] = useState(0); 한 줄로 깔끔하게 정리된다. 또한 함수형 컴포넌트기 때문에 render 메소드를 불러올 필요 없이 그냥 return 해주면 된다. 이제 hook을 통해 간단하게 함수형 컴포넌트에서도 상태 관리를 해줄 수 있게 된 것이다. 상태 관리뿐 아니라 앞서 이야기한 사이드 이펙트 구현을 비롯해 함수 재사용, 연산 값 재사용 등 다양한 기능을 사용할 수 있게 되었다.

 

 

 

Hook 사용 시 주의사항

---

Hook을 통해 함수형 컴포넌트에서 다양한 기능을 구현할 수 있게 되어 신난 건 알겠지만 다음 두 가지 주의사항은 준수해야 한다.

• 최상위(at the top level)에서만 Hook 호출하기. 반복문, 조건문, 중첩된 함수 내에서는 Hook을 실행하면 안된다.
• React 함수 내에서만 Hook 호출하기. Custom Hook 내에서 또한 가능하지만 일반 JS 함수에서는 호출해선 안된다.

위 두 가지 주의사항만 준수한다면 함수형 컴포넌트와 Hook을 이용하여 간결하고 효율적으로 코드를 작성할 수 있다!

 

 

 

참고

---

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

Hook의 개요 – React

https://devbirdfeet.tistory.com/52

React(23) 리액트 훅이란?

 

 

 

함께 읽기

---

https://codestation.tistory.com/47

React의 Lifecycle