custom hooks를 만드는이유

스톱워치와 타이머가 기능은 유사하다 → 로직 재사용 → ( 꺼내고싶음 근데 머 …머가 안돼? 고요 ) → 커스텀 훅으로

// [커스텀 훅을 왜 만들까?]
// 스톱워치에서 구현했던 유사한 기능을 또!!! 또 구현!!
// 로직 복사 + 붙여넣기 -> 수정 (DRY)
// 로직 재사용
// 함수???
// 훅의 규칙! => use로 시작하는 함수! 아! 사용자가 정의하는 훅 함수!
// 아하!!! 커스텀 훅으로 만들자!!!

배열은 이름말고 순서가 중요, 객체는 순서없이 이름이 중요

custom hooks

: 사용자 정의

타이머 일시정지

setInterval(()⇒{})을 치면 id값이 나옴 ⇒ clearnInterval(timerId)

다음상태에서도 id를 기억하고 있어야되는데 초기화되어 →useRef 사용

• useRef는 참조를 하기때문에 변경시킬수있음

  current : 일반 js객체→ 수정 가능

• useState는 수정불가능 , 예측 가능

React.useRef훅의 작동원리 보기

//리액트 훅의 규칙
/* 1. 함수 컴포넌트 내부에서 사용각능
2. use로 싲가하는 함수는 사용자 정의 훅 안에서 사용가능 */
// 첫번째 커스텀(사용자 정의) 훅
// 리액트의 useRef훅의 작동원리 살펴보기
function useRef(initialValue) {
  //함수 컴포넌트 안에서 사용할 때 값을 기억하기 위함
  // 값을 업데이트 할 필요는 없음
  // 값이 object이기때문에 javascript의 객체는 mutable함
  const [refObject /*불변값 */] = React.useState({ /*수정가능*/current: initialValue });
  return refObject;
}

useToggle