Hooks는 리액트 v16.8에 새로 도입된 기능으로, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.

1. useState

• 함수형 컴포넌트에서도 상태 관리를 할 수 있다.

---

2. useEffect

• 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다.
• 클래스형 컴포넌트의 componentDidMount + componentDidUpdate 라고 생각하면 된다.
• useEffect는 기본적으로 렌더링되고 난 직후마다 실행되며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라진다.

// ( App.js )
import React, { useState, useEffect } from 'react';

function App() {
  const [ name, setName ] = useState('');
  const [ nickname, setNickname ] = useState('');

  const onChangeName = (e) => {
    setName(e.target.value);
  }
  const onChangeNickname = (e) => {
    setNickname(e.target.value);
  }
  useEffect( () => {
    console.log("렌더링이 완료되었습니다!");
    console.log({
      name,
      nickname
    });
  });

  return (
    <div>
      <p>현재 카운터값은 { value } 입니다.</p>
      <button onClick={ () => setValue( value + 1 )  }>+1</button>
      <button onClick={ () => setValue( value - 1 )  }>-1</button>
      <br />
      <input onChange={onChangeName} value={name} />
      <input onChange={onChangeNickname} value={nickname} />
      <div>
        이름 : {name} <br/>
        닉네임 : {nickname}
      </div>
    </div>
  );
}

export default App;

① 마운트될 때만 실행하고 싶을 때

• useEffect에서 설정한 함수를 컴포넌트가 화면에 맨 처음에 렌더링될 때만 실행하고, 업데이트 될 때는 실행하지 않으려면 함수의 두 번째 파라미터로 비어 있는 배열을 넣어 주면 된다.

// 위의 코드에서 useEffect 부분만 변경
useEffect( () => {
    console.log("렌더링이 완료되었습니다!");
  }, []);

② 특정 값이 업데이트될 때만 실행하고 싶을 때

• useEffect를 사용할 때, 특정값이 변경될 때만 호출하고 싶은 경우 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 된다.
• 배열 안에는 useState를 통해 관리하고 있는 상태를 넣어주거나 props로 전달받은 값을 넣어도 된다.

// 위의 코드에서 useEffect 부분만 변경
useEffect( () => {
    console.log("렌더링이 완료되었습니다!");
  }, [name]);

③ 뒷정리(cleanup) 함수

• 컴포넌트가 언마운트 되기 전이나 업데이트가 되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리(cleanup)함수를 반환해 주면 된다.
• 컴포넌트가 나타날 때 콘솔에 effect가 나타나고, 사라질 때 cleanup이 나타난다.

// ( App.js )
import React, { useState, useEffect } from 'react';

function App() {
  const [ name, setName ] = useState('');
  const [ nickname, setNickname ] = useState('');

  const onChangeName = (e) => {
    setName(e.target.value);
  }
  const onChangeNickname = (e) => {
    setNickname(e.target.value);
  }

  const [ visible, setVisible ] = useState(false);
  useEffect( () => {
    console.log("effect");
    console.log(name);
    return () => {
      console.log("clean up");
      console.log(name);
    };
  }, [name]);
  /* 렌더링될 때 마다 뒷정리 함수가 계속 나타나며
  뒷정리 함수가 호출될 때는 업데이트되기 직전의 값을 보여준다. */
  
  return (
    <div>
      <button onClick={ () => setVisible(!visible) }>
        { visible ? 'hide' : 'show'}
      </button>
      <br />
      <hr />
      {
        visible 
        && <>
        <input onChange={onChangeName} value={name} />
        <input onChange={onChangeNickname} value={nickname} />
        <div>
          이름 : {name} <br/>
          닉네임 : {nickname}
        </div>
        </>
      }
      
    </div>
  );
}

export default App;

• 오직 언마운트될 때만 뒷정리 함수를 호출하고 싶다면 useEffect 함수의 두 번째 파라미터에 비어 있는 배열을 넣으면 된다.

useEffect( () => {
    console.log("effect");
    return () => {
      console.log("unmount");
    };
  }, []);

---

3. useReducer

4. useMemo

5. useCallback

6. useRef

7. 그외 Hooks