Hook

😁 Hook의 개요

Hook은 React 버전 16.8부터 React 요소로 새로 추가되었습니다.
Hook을 이용하여 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있습니다.

hook 기능을 통한, life cycle, state 제어

---

😆 Hook의 생성 동기

1.컴포넌트 사이에서 상태 로직을 재사용하기 어렵다.

기존의 방법: render props, 고차 컴포넌트 패턴
      weak: 컴포넌트의 재구성 강요, 코드 추적 어려움
            providers, consumers, 고차 컴포넌트 render props, 
            다른 추상화에 대한 레이어로 둘러싸인 "래퍼지옥"(wrapper hell)
Hook의 방법: 컴포넌트로부터 상태 관련 로직을 추상화 가능
  strength: 독립적인 테스트와 재사용이 가능 ,
            계층의 변화 없이 상태 관련 로직을 재사용할 수 있게 함.
            
*고차 컴포넌트(HOC, higher-order component)
 :컴포넌트 로직을 재사용하기 위한 React의 고급 기술
  컴포넌트가 UI를 props로 변환하는 반면, 
  고차 컴포넌트는 컴포넌트를 다른 컴포넌트로 변환합니다.
 
*Render Props
 :React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 간단한 테크닉
  render props 패턴으로 구현된 컴포넌트는 자체적으로 렌더링 로직을 구현하는 대신,
  react 엘리먼트 요소를 반환하고 이를 호출하는 함수를 사용합니다.
 
  
  	<DataProvider render={data => (
  	   <h1>Hello {data.target}</h1>
	)}/>
            
            

2.복잡한 컴포넌트들은 이해하기 어렵다.

관리하기가 힘들어지는 상태 관련 로직들과 사이드 이펙트가 
있는 컴포넌트들을 유지보수해야 합니다. 
각 생명주기 메서드에는 자주 관련 없는 로직이 섞여들어가고는 합니다.

ex)
   componentDidMount 와 componentDidUpdate는 컴포넌트안에서 
   데이터를 가져오는 작업을 수행할 때 사용 되어야 하지만,
   같은 componentDidMount에서 이벤트 리스너를 설정하는 것과 같은
   관계없는 로직이 포함되기도 하며,
   componentWillUnmount에서 cleanup 로직을 수행하기도 합니다.
   
weak: 함께 변경되는 상호 관련 코드는 분리되지만 이와 연관 없는 코드들은 
      단일 메서드로 결합합니다. 
      이로 인해 버그가 쉽게 발생하고 무결성을 너무나 쉽게 해칩니다.

---

근데 Hook이 뭔가요?

Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다.
대신 class 없이 React를 사용할 수 있게 해주는 것입니다.

Class Componenet life cycle

---

📌 State Hook

  import React, { useState } from 'react';

  function Example() {
    // "count"라는 새 상태 변수를 선언합니다
    const [count, setCount] = useState(0);
	//useState -> Hook-> state 추가
        //useState 객체 아니어도 된다
    return (
      <div>
        <p>You clicked {count} times</p>
        //setState 대신 setCount사용
        <button onClick={() => setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }

Hook과 같은 기능을 하는 클래스 예시

  class Example extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        count: 0
      };
    }

    render() {
      return (
        <div>
          <p>You clicked {this.state.count} times</p>
          <button onClick={() => 
          	this.setState({ count: this.state.count + 1 })}>Click me
          </button>
        </div>
      );
    }
  }

클래스 컴포넌트와 함수 컴포넌트의 차이

1. state 변수 선언
   (함수는 this 가질수 없음 -> useState Hook을 직접 호출)
   

2. state 가져오기
   

3. state 갱신하기
   (함수는 setCount와 count 변수를 가지고 있으므로 this를 호출X)
   

const [fruit, setFruit] = useState('banana'); 의 의미

  var fruitStateVariable = useState('banana'); // 두 개의 아이템이 있는 쌍을 반환
  var fruit = fruitStateVariable[0]; // 첫 번째 아이템
  var setFruit = fruitStateVariable[1]; // 두 번째 아이템
  
  useState를 이용하여 변수를 선언하면 2개의 아이템 쌍이 들어있는 배열로 만들어집니다.
  첫 번째 아이템은 현재 변수를 의미하고, 
  두 번째 아이템은 해당 변수를 갱신해주는 함수입니다

const vs let

useState 사용시 값이 다른 값으로 재할당 될텐데 const를 쓰는 이유:

component가 다시 rendering 되면 함수가 다시 실행되어 새 scope를 만들고 
새롭게 name 변수를 만들고, 이전 변수와는 관련이 없어지게 되어 const로 선언한다.

여러개의 state 변수 사용하고 싶다면?

function ExampleWithManyStates() {
  // 여러 개의 state를 선언할 수 있습니다!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  
  function handleOrangeClick() {
   // this.setState({ fruit: 'orange' })와 같은 효과를 냅니다.
    setFruit('orange');
  }

🚀 Component의 LifeCycle

💡 Component의 Lifecycle은, component가 하나의 노드로 DOM에 올라가고, 수정되고, 내려오는 과정으로 구성된다.
👉 즉, "mounting" (adding nodes to the DOM), "unmounting" (removing them from the DOM), and "updating" (making changes to nodes already in the DOM) 으로 이루어진다.

📌 Mount 마운트

• 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입되는 것.
  리액트에서는 컴포넌트를 특정 영역에 끼워넣는 행위를 가리킨다.

• 예로 ReactDOM.render 함수를 통해서 DOM의 특정 영역에 리액트 컴포넌트를 끼워 넣을 수 있고, 이러한 과정을 마운트한다고 표현한다.

• < Rendering과 Mounting >
  👉 "Rendering" is any time a function component gets called or a class-based render method gets called which returns a set of instructions for creating DOM.
  👉 "Mounting" is when React "renders" the component for the first time and actually builds the initial DOM from those instructions.
  👉 렌더링은 컴포넌트가 DOM을 만드는 명령들을 반환하는 함수가 호출되는 것을 말하고, 마운팅은 컴포넌트를 처음으로 렌더링하는 것을 의미한다.

• mount 단계의 class component lifecycle methods
  1. constructor()
  2. static getDerivedStateFromProps()
  3. render()
  4. componentDidMount()

📌 Update 업데이트

• 이미 mount 되어 DOM에 존재하는 컴포넌트를 re-rendering 하여 업데이트 하는 것. (새로 mount 하는 것 아님.)

• A "re-render" is when React calls the function component again to get a new set of instructions on an already mounted component. Re-renders just update the DOM but don't mount since mounting just happens once.

• 컴포넌트는 아래의 네 가지 경우에 업데이트 된다.
  - props가 바뀔 때
  - state가 바뀔 때
  - 부모 컴포넌트가 리렌더링될 때
  - this.forceUpdate로 강제로 렌더링을 트리거할 때

• update 단계의 class component lifecycle methods
  1. static getDerivedStateFromProps()
  2. shouldComponentUpdate()
  3. render()
  4. getSanphotBeforUpdate()
  5. componentDidUpdate()
  

📌 Unmount 언마운트

• 마운트의 반대 과정. 컴포넌트가 DOM에서 제거되는 것

• unmount 단계의 class component에서는 componentWillUnmount() method가 호출된다.

---

⚡️ Effect Hook

side effects(effects)이란,

React 컴포넌트 안에서 데이터를 가져오거나 구독하고, DOM을 직접 조작하는 작업
특징: 다른 컴포넌트에 영향을 줄 수도 있고, 렌더링 과정에서는 구현할 수 없는 작업
Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다
main effect는 render의 return()부분이라고 생각할 수 있다.

useEffect 는 생명주기를 담당

useEffect =　 componentDidMount 　　　　　　+componentDidUpdate 　　　　　　+componentWillUnmount

1. 마운트 될때만 실행하고 싶을 때 (componentDidMount)

만약 useEffect 에서 설정한 함수가 컴포넌트가 화면에 가장 처음 렌더링 될 때만 실행되고 업데이트 할 경우에는 실행 할 필요가 없는 경우엔 함수의 두번째 파라미터로 비어있는 배열을 넣어주시면 됩니다.

 useEffect(() => {
    console.log('마운트 될 때만 실행됩니다.');
  }, []);

2. 특정 값이 업데이트 될 때만 실행하고 싶을 때(componentDidupdate)

클래스 컴포넌트의 경우 prevProps의 값을 가져와 비교를 하여 로직수행

componentDidUpdate(prevProps, prevState) {
  if (prevProps.value !== this.props.value) {
    doSomething();  
  }
}

useEffect에서는 두번째 파라미터로 전달되는 배열 안에 검사(업데이트되는지)하고 싶은 값을 넣어주시면 된답니다.

useEffect(() => {
    console.log(name);
  }, [name]); //name의 업데이트가 있을경우 render

3. 뒷 정리하기(componentWillUnmount)

만약 컴포넌트가 언마운트되기 전이나, 업데이트 되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect 에서 뒷정리(cleanup) 함수를 반환해주어야 합니다.

useEffect(() => {
    console.log('effect');
    console.log(name);
    return () => {
      console.log('cleanup');
      console.log(name);
    };
  });

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

 useEffect(() => {
    console.log('effect');
    console.log(name);
    return () => {
      console.log('cleanup');
      console.log(name);
    };
  }, []);

여러개의 effect 사용 가능

function FriendStatusWithCounter(props) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
  });
  // ...
}

🔒 Hook의 규칙

1.최상위(at the Top Level)에서만 Hook을 호출해야 합니다

반복문, 조건문 혹은 중첩된 함수 내에서 Hook을 호출 ❌

Why?
규칙을 따르면 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 Hook이 호출되는 것이 보장

모든 렌더링에서 Hook의 호출 순서는 같기 때문에 예시가 올바르게 동작할 수 있습니다.

function Form() {
  // 1. name이라는 state 변수를 사용하세요.
  const [name, setName] = useState('Mary');

  // 2. Effect를 사용해 폼 데이터를 저장하세요.
  useEffect(function persistForm() {
    localStorage.setItem('formData', name);
  });

  // 3. surname이라는 state 변수를 사용하세요.
  const [surname, setSurname] = useState('Poppins');

  // 4. Effect를 사용해서 제목을 업데이트합니다.
  useEffect(function updateTitle() {
    document.title = name + ' ' + surname;
  });

  // ...
}

// ------------
// 첫 번째 렌더링
// ------------
useState('Mary')           // 1. 'Mary'라는 name state 변수를 선언합니다.
useEffect(persistForm)     // 2. 폼 데이터를 저장하기 위한 effect를 추가합니다.
useState('Poppins')        // 3. 'Poppins'라는 surname state 변수를 선언합니다.
useEffect(updateTitle)     // 4. 제목을 업데이트하기 위한 effect를 추가합니다.

// -------------
// 두 번째 렌더링
// -------------
useState('Mary')           // 1. name state 변수를 읽습니다.(인자는 무시됩니다)
useEffect(persistForm)     // 2. 폼 데이터를 저장하기 위한 effect가 대체됩니다.
useState('Poppins')        // 3. surname state 변수를 읽습니다.(인자는 무시됩니다)
useEffect(updateTitle)     // 4. 제목을 업데이트하기 위한 effect가 대체됩니다.

// ...

조건문에 Hook을 쓴다면?(2번 항목)

function Form() {
  // 1. name이라는 state 변수를 사용하세요.
  const [name, setName] = useState('Mary');

  // 2. Effect를 사용해 폼 데이터를 저장하세요.
  if (name !== '') {
    useEffect(function persistForm() {
      localStorage.setItem('formData', name);
    });
  }

  // 3. surname이라는 state 변수를 사용하세요.
  const [surname, setSurname] = useState('Poppins');

  // 4. Effect를 사용해서 제목을 업데이트합니다.
  useEffect(function updateTitle() {
    document.title = name + ' ' + surname;
  });

  // ...
}


useState('Mary')           // 1. name state 변수를 읽습니다. (인자는 무시됩니다)
// useEffect(persistForm)  // 🔴 Hook을 건너뛰었습니다!
useState('Poppins')        // 🔴 2 (3이었던). surname state 변수를 읽는 데 실패했습니다.
useEffect(updateTitle)     // 🔴 3 (4였던). 제목을 업데이트하기 위한 effect가 대체되는 데 실패했습니다.

name !== '' 조건
첫 번째 렌더링 =>true
그다음 렌더링에서 폼을 초기화됨 => false

Hook의 순서가 하나씩 밀리는 버그 발생

해결방법

  useEffect(function persistForm() {
    // 👍 더 이상 첫 번째 규칙을 어기지 않습니다
    if (name !== '') {
      localStorage.setItem('formData', name);
    }
  });

2. 오직 React 함수 내에서 Hook을 호출해야 합니다

Hook을 일반적인 JavaScript 함수에서 호출 ❌

Why?
이 규칙을 지키면 컴포넌트의 모든 상태 관련 로직을 소스코드에서 명확하게 보이도록 가능

💬 자신만의 Hook 만들기

자신만의 Hook을 만들면 컴포넌트 로직을 함수로 뽑아내어 재사용할 수 있습니다.
밑의 사진에서 두 함수 컴포넌트의 같은 로직 사용을 알 수 있습니다.

사용자 정의 Hook 추출하기

두 개의 자바스크립트 함수에서 같은 로직을 공유하고자 할 때는 또 다른 함수로 분리합니다. 컴포넌트와 Hook 또한 함수이기 때문에 같은 방법을 사용할 수 있습니다!

사용자 정의 Hook은 이름이 use로 시작하는 자바스크립트 함수

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);
  // friendID를 인수로 받고 온라인 상태의 여부를 반환

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

공통부분을 useFriendStatus() 를 이용하여 간단하게 처리했다.

이때 주의사항들은

1. 사용자 정의 Hook의 이름은 “use”로 시작되어야 한다
Why?
특정한 함수가 그 안에서 Hook을 호출하는지를 알 수 없기 때문에 use 사용 안할시, Hook 규칙의 위반 여부를 자동으로 체크할 수 없습니다.

2. 같은 Hook을 사용하는 두 개의 컴포넌트는 state를 공유 ❌
Why?
상태 관련 로직을 재사용하는 메커니즘이지만 사용자 Hook을 사용할 때마다 그 안의 state와 effect는 완전히 독립적이다.

📋 Hook 자주 묻는 질문 모음

Q1:Class로 하지 못하는 것 중에 Hook으로 가능한 것이 무엇인가?

A1:Hook은 컴포넌트 간에 기능을 재사용할 수 있는 강력하고 표현적인 새로운 방법을 제공(자신만의 Hook 만들기)

Q2.생명주기 메서드가 Hook에 어떻게 대응합니까?

A2:

• constructor: useState 호출에서 state를 초기화 할 수 있습니다.
  초기 state를 계산하는 것이 비싸면 useState에 함수 컴포넌트를 전달할 수 있습니다.

const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props);
  return initialState;
});

• getDerivedStateFromProps: 대신 렌더링하는 동안 업데이트 예약.
• shouldComponentUpdate: React.memo를 참조해주세요.
• render: 이것은 함수 컴포넌트 본체 자체입니다.
• componentDidMount, componentDidUpdate, componentWillUnmount:
  useEffect Hook은 이들의 모든 조합을 표현할 수 있습니다.
  
• getSnapshotBeforeUpdate, componentDidCatch 그리고 getDerivedStateFromError: 이러한 메서드에 대한 Hook은 없지만, 곧 추가될 예정입니다.

Q3.하나 또는 여러 state 변수를 사용해야 합니까?

A3: useState()를 한 번만 호출하고 모든 state를 단일 객체에 넣고 싶을 수 있습니다.

function Box() {
  const [state, setState] = useState({ left: 0, top: 0, width: 100, height: 100 });
  // ...
}
--------------------------------------------------------------
 // ...
  useEffect(() => {
    function handleWindowMouseMove(e) {
      // "... state"를 spread 하여 너비와 높이가 "손실"되지 않습니다
      setState(state => ({ ...state, left: e.pageX, top: e.pageY }));
    }
    // 주의: 이 구현은 약간 단순화되었습니다
    window.addEventListener('mousemove', handleWindowMouseMove);
    return () => window.removeEventListener('mousemove', handleWindowMouseMove);
  }, []);
  // ...