hooks 소개

hooks는 React16.8에 새로 추가되었다. 클래스를 작성하지 않고도 state와 다른 React의 기능을 사용할 수 있다.

• Completely opt-in. 기존 코드를 다시 작성하지 않고 컴포넌트에서 hooks를 사용할 수 있다. 그러나 지금 당장 hooks를 배우거나 사용할 필요가 없다.
• 100% backwards-compatible. 100% 이전 버전과 호환된다. 큰 변화가 없다.
• Available now. v16.8.0부터 당장 사용할 수 있다.

hooks 개요

state hook

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

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

useState() 의 유일한 파라미터는 초기 값이다.

하나의 컴포넌트에서 state hook을 두 번 이상 사용할 수 있다.

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  // ...
}

effect hook

컴포넌트의 사이드 이펙트 기능을 추가한다. componentDidMount, componentDidUpdate, componentWillMount 의 기능을 수행 한다.

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

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

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

모든 렌더링(첫 번째 렌더링 포함) 이후에 실행이 된다.

cleanup 하는 코드를 넣을 수도 있다.

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

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

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);

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

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}