custom hook 구현하기

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

export default function App() {
  const [isTextChanged, setIsTextChanged] = useToggle(); // 1
  console.log('is', isTextChanged);
  console.log('set', setIsTextChanged);
  return (
    <div>
      <div>TesT</div>
      <button onClick={setIsTextChanged}> // 2
        {isTextChanged ? 'Toggled' : 'Click to Toggle'} // 3
      </button>
    </div>
  );
}

const useToggle = (initialState = false) => { // 4
  const [state, setState] = useState(initialState); 
  const toggle = useCallback(() => setState((state) => !state), []); // 5
  return [state, toggle];
};

1. useToggle을 실행시키고 return 값을 구조 분해 할당을 통해 값을 초기화 시킨다.
   즉 useToggle hook의 return 값인 [state, toggle] = [isTextChanged, setIsTextChanged]가 되는 것이다.

2. onClick을 통해 앞서 할당한 함수를 실행시킨다 이는 useToggle hook에서 가져온 toggle 함수이다.

3. 선택적 rendering을 실행해 button의 innerText를 변경한다.

4. hook이 실행되면 state를 false로 초기화 해준다.

5. useCallback함수를 통해 memoization 해줌.