[what is?] react hooks 가 뭔가요?

저번 프로젝트까지는 react개발을 class 형 컴포넌트로 작성했었습니다. 그리고 이번 프로젝트에서는 함수형 컴포넌트로 작성하게 되었는데요, 이 함수형 컴포넌트를 작성하면서 꼭 필요한 기능인 react hooks에 대해 알아보는 시간을 가져보도록 하겠습니다. 

 

1. react hooks?

 

react hooks는 react v16.8 버전에 도입된 새로운 기능입니다. 함수형 컴포넌트에서도 상태관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공함으로써 기존의 함수형 컴포넌트에서는 할 수 없던 다양한 기능들을 제공하고 있습니다. 

 

이 말을 들었을 때 '그렇다면 그 전에는 이런 기능이 없었던 말이야?' 라는 생각이 드실 수도 있습니다. 그리고 그 생각은 정확하다고 말씀드릴 수 있습니다. react hooks 이전의 함수형 컴포넌트는 어떤 특별한 기능을 포함하지 않고, 그저 하나의 UI 단위로서만 존재할 수 있었습니다. 그 컴포넌트에는 기능을 넣을 수 있는 수단이 전무했기 때문이죠.

 

하지만 react 개발진들은 함수형 앱을 너무나 좋아했는지, 결국 함수형 컴포넌트에서도 클래스형과 같이 다양한 기능을 수행할 수 있는 버젼의 react를 개발해내고 말았습니다. 현재 react 공식 문서에서는 클래스형보다 hooks를 활용한 함수형 컴포넌트를 적극 장려하고 있습니다. 

 

2. react hooks의 기능

 

react hooks 에는 다양한 기능들이 존재합니다. 오늘 포스팅에서는 그 중 가장 많이 사용되는 기능인 useState와 useEffect에 대해 알아보도록 하겠습니다.

 

1) useState 

 

useState 는 가장 기본적인 hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줍니다. 클래스형 컴포넌트의 state라고 생각하시면 됩니다. 하지만 클래스형 컴포넌트의 state와 차이점이라고 한다면, 클래스형에서 state는 하나의 객체로서 통합적으로 관리되었던 반면, useState에서는 하나의 state 프로퍼티당 하나의 useState 를 사용해야 한다는 점입니다. 

 

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, count라 부르겠습니다.
  const [count, setCount] = useState(0);

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

//코드 출처: react 공식문서

 

위 코드를 보시면 함수형 컴포넌트에서 버튼을 클릭할 때마다 카운트가 증가하는 기능을 가진 컴포넌트를 선언한 것을 알 수 있습니다. 이때 클릭의 영향으로 인해 state가 바뀌어야 하는 부분을 useState를 활용하여 작성한 것을 볼 수 있죠. 

 

useState를 활용할 때에는 우선 이 기능을 import하여야 합니다. 그 후 함수 내에서 배열로 초기 state 값과 그 state 값을 변경할 수 있는 인자를 선언합니다.

 

const [state, setState] = useState(`초기 state`값)

//state로 선언된 인자와 setState로 선언된 인자는 그 인자 이름을 아무렇게나 바꿔도 상관은 없습니다.
//다만 state로 선언한 인자가 있다면, 그 뒤 인자를 setState로 선언하는 것이 convention 입니다.

 이렇게 선언한 후에 state 값이 변화해야하는 부분에서 setState의 인자를 바꾸고 싶은 형태의 인자로 넣어주면 useState 활용은 끝이 납니다. 클래스형과 비교했을 때 크게 어렵지 않은 부분이라고 할 수 있습니다. 

 

만일 관리해야 하는 state의 값이 여러 개인 경우에는 그 state의 갯수만큼 useState를 선언해야 합니다. 만일 setState에 여러 인자를 넣어 한꺼번에 변화시키려고 하는 경우 코드의 의도와는 다르게 state 값이 변하는 것을 경험하게 되실 겁니다.

 

2) useEffect

 

useEffect 는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 hook 입니다. 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태로 보아도 무방합니다.

 

import React, { useState, useEffect } from 'react';

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

  // componentDidMount, componentDidUpdate와 같은 방식으로
  useEffect(() => {
    // 브라우저 API를 이용하여 문서 타이틀을 업데이트합니다.
    document.title = `You clicked ${count} times`;
  }, [`추적하는 인자`]);

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

//코드 출처: react 공식문서

 

useEffect의 사용방법은 componentDidMount에서와 마찬가지로 rendering 후에 실행되어야 할 기능을 작성해주면 됩니다. 만일 특정 인자가 업데이트 된 후에 rendering이 다시 될 필요가 있을 경우에는 `추적하는 인자` 부분에 상태가 업데이트되어야 하는 인자를 넣어 프로그램으로 하여금 감시하게 할 수 있습니다. `추적하는 인자`가 변하게 될 경우 컴퓨터는 그 즉시 변화를 감지하여 페이지를 다시 rerendering 하게 됩니다. 만일 `추적하는 인자`부분에 빈 배열을 포함한 그 어느 것도 넣지 않게 될 경우, 페이지는 무한 렌더링을 하게 되어 페이지가 마비 될 수도 있습니다.

 

3. 마무리

 

오늘은 react hooks의 기능들에 대해 알아보았습니다. 아직 저도 hooks를 쓴지 일주일이 채 되지 않았기 때문에 모르는 부분도 많고 익숙하지 않은 부분들이 많은데요, react 공식문서에서도 적극 권장하고 있고, 또 쓴 사람들의 후기를 들어보면 hooks가 엄청 편하다고 하니, 앞으로 계속 활용해 나가면서 한층 더 성장한 프론트엔드 개발자가 되어야겠습니다.