Hook이란?

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

• 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능 등을 제공4

Hook을 사용하는 이유

1. Hook을 사용하면 컴포넌트로부터 상태 관련 로직을 추상화할 수 있습니다. 이를 이용해 독립적인 테스트와 재사용이 가능 ( 계층의 변화 없이 상태 관련 로직을 재사용 )
2. Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용
3. Hook은 Class없이 React 기능들을 사용하는 방법을 제시

Hook을 사용하지 않았을 때 예시

function App() {
  let count = 0;
  const increase = () => {
    count++;
    console.log(count);
  };

  return (
    <div>
      <button onClick={increase}>+</button>
      {count}
    </div>
  );
}

• +버튼을 누르면 count가 증가하는 것을 구현하고 싶을 때
  이를 실행하면 아래와 같다.

버튼을 눌러도 콘솔에는 값이 변하지만 렌더링한 브라우저는 값이 변하지 않는 것을 알 수 있다.

Hook을 사용하였을 때

import { useState } from "react";
function App() {
  const [count, setCount] = useState(0);

  const increase = () => {
    setCount(count + 1);
    console.log(count);
  };

  return (
    <div>
      <button onClick={increase}>+</button>
      {count}
    </div>
  );
}

버튼을 누르면 누를때마다 브라우저의 값이 렌더링 되는 것을 알 수 있다.

Hook 다루기

useState

Hook을 호출해 함수 컴포넌트(function component) 안에 state를 추가했습니다.
이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지
( 그대로 유지라는 건 그때의 값을 유지 )

useEffect

함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 한다

• useEffect를 사용하면, React는 DOM을 바꾼 뒤에 “effect” 함수를 실행

• React에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지

side effects

• 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위
• React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과

useRef

.current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

• ref로 input에 등록시키고 이를 버튼을 눌렀을 때 이벤트에서 해당 참조부분의 current를 참조할 수 있다.

• inputEl.current는 참고로 해당 태그를 나타낸다. ( == <input type="text"> )