Hook

Hook이란?

컴포넌트에서 데이터를 관리(State)하고 데이터가 변경 될 때 상호작용(Effect)을 하기 위해 사용합니다.

Hook의 등장 배경

기존에는 컴포넌트 내에서 State의 생명주기를 관리하기 위해서 반드시 클래스 컴포넌트를 사용하여야 했습니다.

다소 복잡한 클래스 컴포넌트를 보완하고 함수 컴포넌트에서 클래스 컴포넌트의 기능을 귀현하기 위해 React 16.8 버전에 추가된 것이 Hook입니다.

✔️ Hook은 함수 컴포넌트 내에서만 사용이 가능합니다.
✔️ Hook의 이름은 반드시 use로 시작해야합니다.
✔️ 최상위 Level에서만 Hook을 호출할 수 있습니다.
(if문 for문 안 쪽 또는 콜백함수 내에서 호출하지 마세요)

Effect Hook

✔️ Effect Hook을 사용하면 함수 컴포넌트에서 컴포넌트가 렌더링 될때마다 side effect를 수행할 수 있습니다.
👉 component가 mount, update, unmount됐을 때 작업을 처리할 수 있습니다.
✔️ 컴포넌트가 최초로 렌더링될 때, 지정한 State나 Props가 변경될 때마다 이펙트 콜백 함수가 호출됩니다.

• Deps: 변경을 감지할 변수들의 집합(배열)
• EffectCallback: Deps에 지정된 변수가 변경될 때 실행할 함수

1️⃣ useEffect(callBackFunc);
2️⃣ useEffect(callBackFunc, []);
3️⃣ useEffect(callBackFunc, [state1, state2]);
4️⃣ useEffect(()=>{ return(() => func()) });

1️⃣ 렌더링이 될 때마다 (컴포넌트가 마운트 된 후, 컴포넌트가 업데이트되고 난 후, 컴포넌트가 언마운트 되기 전에) 실행
👉 생명주기 메소드에서 componentDidMount, componentDidUpdate, componentWillUnmount에 해당

2️⃣ 컴포넌트가 최초 렌더링 되었을 때만 실행
👉 생명주기 메소드의 componentDidMount에 해당

3️⃣ 최초 렌더링 or state1 or state2가 변경되었을 때 실행이 된다.
👉 생명주기 메소드의 componentDidUpdate에 해당

4️⃣ useEffect 함수 내에서 다른 함수를 return할 경우 컴포넌트가 재랜더링 되기전 or 컴포넌트가 없어질 때 호출할 함수를 지정
👉 생명주기 메소드에서 componentWillUnmount에 해당
ex)

컴포넌트 생성/제거 버튼을 누르면 안녕하세요를 return 하는 Greeting 컴포넌트가 생성되고 콘솔에 컴포넌트가 생성되었습니다.가 출력된다
컴포넌트 생성/제거 버튼을 다시 누르면 안녕하세요를 return 하는 Greeting 컴포넌트가 제거되고 콘솔에 컴포넌트가 소멸되었습니다.가 출력된다.

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

function Greeting() {
  useEffect(() => {
    //👉컴포넌트를 렌더링할 때, state가 변경될 때 호출
    console.log("컴포넌트가 생성되었습니다.");
     //👉이전에 있던 컴포넌트를 다시 렌더링할 때, 컴포넌트가 없어질 때 호출
    return () => {
      console.log("컴포넌트가 소멸되었습니다.");
    };
  }, []);
  return <h1>안녕하세요.</h1>;
}

function App() {
  const [isCreated, setIsCreated] = useState(false);
  return (
    <div className="App">
      <button
        onClick={() => {
          setIsCreated((current) => !current);
        }}
      >
        컴포넌트 생성/제거
      </button>
      {isCreated && <Greeting />}
    </div>
  );
}

export default App;