React :: Hook, useState, useEffect, 사용자 정의 Hook

Hook

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수를 말한다.

useState, useEffect 와 같은 내장 Hook 을 사용하거나, 직접 정의해서 사용할 수도 있다.

 

Hook 사용 규칙

Hook은 그냥 JavaScript 함수이지만, 두 가지 규칙을 준수해야 한다.

• **최상위(at the top level)**에서만 Hook을 호출! 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안됨
• React 함수 컴포넌트 내에서만 Hook을 호출! (당연히, Class 안에서는 Hook 은 동작하지 않음) 일반 JavaScript 함수에서는 Hook을 호출하면 안됨

그럼 본격적으로 대표적인 내장 Hook 두 개를 살펴보자.

---

useState

useState 는 클래스 컴포넌트에서 사용하는 state 의 개념을 함수 컴포넌트에서 사용하도록 하는 것이다.

먼저, 함수 컴포넌트의 형태를 짚고 넘어가보자.

 

함수 컴포넌트는 크게 다음의 두 형태로 존재한다.

function Example(props) {
  // 여기서 Hook을 사용할 수 있다
  return <div />;
}

const Example = (props) => {
  // 여기서 Hook을 사용할 수 있다
  return <div />;
}

 

그리고, 클래스 컴포넌트에서 state 는 다음과 같은 형태로 사용되었다.

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

 

이전에 Props, State 를 배울 때 State 는 클래스 컴포넌트에서만 사용할 수 있다고 했다.

그럼 함수 컴포넌트에서는 State 의 개념을 사용할 수 없는가에 대한 의문을 가졌었는데, 

useState 를 사용해서 State 의 개념을 사용할 수 있다.

 

 

useState 사용 흐름 (요약)

useState 를 사용하는 것은 크게 다음의 세 단계로 이루어진다.

 

1) useState 를 사용하기 위해,  useState Hook 를 React 에서 가져온다.

  import React, { useState } from 'react';

2) useState 로 state 변수를 만들어준다.

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

(여기서 대괄호가 의미하는 것은 "배열 구조 분해"라는 JavaScript 문법이다)

 

3) useState 가 만들어준 state 를 갱신할 수 있는 함수로 state 변수를 갱신한다.

React 는 변화를 인지하고, 해당 컴포넌트를 리렌더링한다.

import React, { useState } from 'react'; 2:
  function Example() {
    const [count, setCount] = useState(0); 5:
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => setCount(count + 1)}>10:         Click me
        </button>
      </div>
    );
  }

 

useState Hook 을 사용하는 흐름을 살펴봤다.

그러면, useState 에 인자로 넘겨준 것은 무엇으로 받은 것은 무엇일까?

머릿속에 useState 를 사용하는 흐름을 그려두고, 더 세부적으로 살펴보자.

 

useState 세부 사항

useState Hook 을 컴포넌트 내에서 호출하여 사용하면 된다.

(함수 컴포넌트는 this 를 가질 수 없기 때문에 직접 useState 를 호출해서 사용)

  const [fruit, setFruit] = useState('apple');

이건 무엇을 의미할까?

 

먼저 useState 의 인자로 넘겨준 'apple' 은 fruit state 의 초기값이다. 

그리고 useState 는 'apple' 을 초기값으로 가지는 fruit state 와 fruit 의 값을 갱신해줄 수 있는 setFruit 함수를 반환해주는 것이다.

 

즉, useState 를 통해 저 두 값을 받아왔다면 이렇게 사용할 수 있다.

//state 값 변경하기
setFruit('banana')

//state 값 가져오기
 <p>You're fruit is {fruit} !</p>

이러면 fruit state 값은 'apple' 이 아닌 'banana' 로 변경되는 것이다.

 

이게 만일 클래스 컴포넌트였다면, this.state.fruit 로 접근해야 하고 state 값을 가져오는 데에도 {this.state.fruit} 를 사용해야 했을 것이다.

//state 값 변경하기
this.setState({fruit: 'banana'})

//state 값 가져오기
 <p>You're fruit is {this.state.fruit} !</p>

더욱 간편하고 직관적으로 사용할 수 있게 된 것이다.

 

 

정리하자면, useState 의 인자로 만들 state 의 초기값을 던져주면, useState 가 state 와 state 를 갱신할 함수를 반환해주는 것!

다음과 같이 여러 state 변수를 정의해두고 사용할 수 있다.

  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

---

useEffect

React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것이다.

(참고: 2021.03.21 - [PROGRAMMING/React] - React :: 생명주기 (Lifecycle))

 

왜 이들을 통합했고, 그게 장점이 될까?

 

다음 내용을 생각해보자.

 

렌더링 이후에 항상 같은 코드가 실행되길 바란다면, 어떤 생명 주기 함수를 사용해야 할까?

컴포넌트가 이제 막 마운트 된 것인지, 아니면 업데이트된 것인지에 상관없이 코드를 실행해야 한다.

그럼, 생명 주기 함수를 생각했을 땐 componentDidMount와 componentDidUpdate 을 모두 사용해야 한다.

그것도 같은 코드로 실행해야한다. 다음처럼..

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

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }  
  
  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

이는 상당히 비효율적인 것으로 보인다.

 

반면 useEffect Hook 은 기본적으로 매 렌더링 이후에 effects를 실행한다. 첫 번째 렌더링도 포함해서!

(우리가 React 에게 넘긴 이 Hook 함수를 'effect' 라고 부른다.)

 

그래서 그냥 이렇게 작성해주면 된다.

 

* useEffect Hook 을 사용하려면 먼저 React 로부터 받아와야 한다.

import React, { useState, useEffect } from 'react';
function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {    
    document.title = `You clicked ${count} times`;  
  });

중복된 코드도 없고, 가독성도 늘었다.

 

useEffect 특징

• 컴포넌트 내에서 사용한다.
  -> effect 를 통해 state 변수와 각종 prop 에도 접근 할 수 있도록!
• 렌더링 이후에 매번 수행된다.
  (마운트, 업데이트라는 개념보다는 렌더링 이후에 발생 이라고 생각하면 된다.)
  React 는 effect 가 수행되는 시점에 이미 DOM 이 업데이트 되었음을 보장한다.
• useState와 마찬가지로 컴포넌트 내에서 여러 개의 effect를 사용할 수 있다.

 

Clean-Up

컴포넌트를 정리(Clean-Up) 이 effect 에 필요할 때가 있다.

그럴 땐 useEffect 에서 정리하는 기능을 가진 함수를 반환하면 됩다.

 

effect 가 함수를 반환하면 리액트는 그 함수를 정리가 필요할 때 실행시킨다.

이는 (기본적으로) 한 번이 아니라, 렌더링이 실행될 때마다, 매번 리렌더링 시에 정리하게 된다.

 

 

 

코드를 보자.

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

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {    
    function handleStatusChange(status) {      
        setIsOnline(status.isOnline);    
      }    
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);    
    
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시한다.    
    return function cleanup() {      
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);    
    };  
  });
  
  if (isOnline === null) {
    return 'Loading...';
  }
    
  return isOnline ? 'Online' : 'Offline';
}

이 코드는 친구의 온라인 상태를 구독할 수 있는 ChatAPI 모듈을 사용한 예이다.

컴포넌트가 첫 마운트 될때를 포함하여, 매번 리렌더링 할 때마다 친구 구독-구독 해지를 반복한다.

 

 

이는 버그를 방지할 수 있지만, 성능 저하(매번 정리하고 다시 실행)가 우려될 수 있다.

이 점들을 살펴보자.

 

버그 방지

이전의 코드로 어떻게 버그 방지가 되냐고 생각할 수도 있지만,

만일 프로그램이 돌아가는 중에 (컴포넌트가 화면에 표시되어있는 동안) 친구의 id, 즉 friend.id 가 바뀌었으면 어떻게 될까?

다른 친구의 온라인 상태를 계속 표시하게 될 것이다. 이는 명백한 버그이다.

 

이를 해결하기 위해서 클래스 컴포넌트였다면 componentDidUpdate를 사용하겠지만,

useEffect 는 리렌더링 할 때마다 , 다음의 effect 를 적용하기 전에 이전의 effect 는 정리한다.

즉 위의 코드의 실행 과정을 가시화해보면 다음과 같다.

// { friend: { id: 100 } } state을 사용하여 마운트한다.
ChatAPI.subscribeToFriendStatus(100, handleStatusChange);     // 첫번째 effect가 작동한다.

// { friend: { id: 200 } } state로 업데이트한다..
ChatAPI.unsubscribeFromFriendStatus(100, handleStatusChange); // 이전의 effect를 정리(clean-up)한다.
ChatAPI.subscribeToFriendStatus(200, handleStatusChange);     // 다음 effect가 작동한다.

// { friend: { id: 300 } } state로 업데이트한다.
ChatAPI.unsubscribeFromFriendStatus(200, handleStatusChange); // 이전의 effect를 정리(clean-up)한다.
ChatAPI.subscribeToFriendStatus(300, handleStatusChange);     // 다음 effect가 작동힌다.

// 마운트를 해제한다.
ChatAPI.unsubscribeFromFriendStatus(300, handleStatusChange); // 마지막 effect를 정리(clean-up)한다.

이렇게 하면 클래스 컴포넌트에서 자주 발생하는, 업데이트 로직 (componentDidUpdate) 을 빼먹으면서 발생하는 버그를 예방할 수 있다!

 

성능 저하 발생이 우려된다면...

친구 id 가 변경되지 않았으면 굳이 구독 해지를 할 필요가 없다.

그래서 위의 useEffect 를 다음과 같이 수정하면 성능 저하를 방지할 수 있다.

useEffect(() => {
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  return () => {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
}, [props.friend.id]); // props.friend.id가 바뀔 때만 재구독한다.

이렇게 특정 값들이 리렌더링 시에 변경되지 않는다면 리액트로 하여금 effect 를 건너뛰도록 할 수 있다.

useEffect 의  두 번째 인수로 "신경쓰는" 것을 넘겨주면 된다.

 

따라서, 위의 코드에서 props.friend.id 가 변경되지 않았다면 구독-재구독 은 발생하지 않는다. (해당 effect 실행 x)

 

그런데, 이 최적화 기법을 사용하면 배열이 컴포넌트 범위 내에서 바뀌는 값 + effect 에 의해 사용되는 값을 모두 포함한다는 것을 기억해야 한다.

 

만일 effect 를 마운트와 마운트 해제 시에 딱 한 번만 실행하고 싶다면, useEffect 의 두 번째 인수로 빈 배열([]) 을 넘겨주면 된다.

(이렇게 사용하는 것은 클래스 컴포넌트의 componentDidMount와 componentWillUnmount 모델에 더 가깝다)

 

Multiple useEffect

여러 effect 를 설정해서 각 effect 가 하는 일을 구분할 수 있다.

 

클래스 컴포넌트에서 생명 주기 API 를 사용할 때에는 '시기'에 맞춰서 기능을 다 넣어야 했지만, useEffect 는 '기능'에 맞춰서 분리할 수 있다.

 

즉, 구독을 추가하고 제거하는 로직과 같이 서로 관련 있는 코드들을 한군데에 모아서 작성할 수 있다.

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {    
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {    
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });
  // ...
}

---

사용자 정의 Hook

사용자 정의 Hook 을 만들어두고 사용할 수 있다.

• 이름이 use로 시작하는 자바스크립트 함수이다.
• 다른 Hook을 호출할 수 있다.
• 조건부 함수가 아니어야 한다.
• 같은 Hook을 사용하는 두 개의 컴포넌트는 state를 공유하지 않는다
  

위에서 계속 살펴본 예제에서 친구의 상태를 구독하고, 온라인 여부를 반환하는 코드는 다른 곳에서도 쓰일 수 있다.

그럼 그 부분을 사용자 정의 Hook 로 만들어서 사용하면 어떨까?

 

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

 

이 useFriendStatus Hook의 목표는 친구의 상태를 구독하는 것이다.

이를 위헤 friendID를 인수로 받고 온라인 상태의 여부를 반환한다.

 

이제 다른 컴포넌트들이 이 Hook 을 가지고 독립적으로 해당 기능을 수행할 수 있다.

Hook은 state 그 자체가 아니라, 상태 관련 로직을 재사용하는 방법이기 때문이다.

각 컴포넌트에서의 Hook 호출은 완전히 독립된 state를 가지고, 심지어는 한 컴포넌트 안에서 같은 custom Hook을 두 번 쓸 수도 있다.

 

Custom Hook은 기능이라기보다는 컨벤션(convention)에 가깝습니다. 이름이 ”use“로 시작하고, 안에서 다른 Hook을 호출한다면 그 함수를 custom Hook이라고 부를 수 있습니다. useSomething이라는 네이밍 컨벤션은 linter 플러그인이 Hook을 인식하고 버그를 찾을 수 있게 해줍니다. - React 공식 문서

 

그래서 저 사용자 정의 Hook 을 아래와 같이 서로 다른 두 컴포넌트에서 사용할 수 있다.

function FriendStatus(props) {
  const isOnline = useFriendStatus(props.friend.id);
  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);
  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

---

Reference

React 공식 문서

ko.reactjs.org/docs/hooks-overview.html

ko.reactjs.org/docs/hooks-effect.html

ko.reactjs.org/docs/hooks-custom.html

.