React Hooks

훅(Hook)은 함수형 컴포넌트에 리액트의 다른 기능들을 갈고리처럼 연결해주는 것

• Hook은 React v16.8부터 사용 가능한 새로운 기능
• 리액트에서 기본적으로 제공되는 Hook들은 use로 시작하는 함수들
• Hook은 함수형 컴포넌트가 리엑트 렌더링 과정에서 항상 같은 순서로 호출되는 규칙을 이용하여 호출순서를 이용하여 상태 매칭

훅(Hook)의 규칙

• React 함수형 컴포넌트 안에서만 사용
• 컴포넌트 안의 반복문, 조건문, 중첩된 함수 안에서 훅 사용 ❌

useState

React의 useState()를 사용하면 함수형 컴포넌트에도 state를 설정할 수 있다.

• state와 state를 업데이트하는 함수를 쌍으로 제공
• useState()는 전달 받는 인자로 state의 초기 값을 설정 (첫 렌더링 될 때 딱 한번 사용)

const [state, setState] = React.useState(초기값);

클래스 컴포넌트의 this.state와 차이점

useState()로 설정된 함수형 컴포넌트의 state는 클래스의 state와 달리 1개 이상의 state 마다 개별적 업데이트가 요구된다.
반면 클래스 컴포넌트는 state 업데이트 시, state의 일부 데이터를 교체하고 합친다

useEffect

useEffect() 훅은 클래스 컴포넌트의 다음의 라이프 사이클 훅을 하나의 API로 통합한 것

• componentDidMount
• componentDidUpdate
• componentWillUnmount

useEffect => use + sideEffect??
라이프사이클은 다른 컴포넌트에 영향을 줄 수 있고
컴포넌트 렌더링 과정에서 구현될 수 없는 것이기에
이러한 동작을 Side Effect(부작용)이라 부른다.

컴포넌트 렌더링, 업데이트 이후 시점

사이드 이펙트	설명
DOM 컨트롤	실제 DOM 노드인 문서 제목 요소 <title>에 접근 및 콘텐츠 변경
Time 컨트롤	특정 시간 이후 <title> 콘텐츠 변경

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

function CountDown(props) {
  const [count, setCount] = useState(10);
  
  // 사이드 이펙트
  useEffect(() => {
    // 실제 DOM 노드에 접근
    const docTtile = document.querySelector('title');
    // 문서 제목을 백업
    let originDocTitleContent = docTitle.innerText;
    // 문서 제목(title) 변경
    docTitle.innerText = `카운트 다운 (${count})`;
    // 3초 뒤, 문서 제목을 복구
    setTimeout(() => docTitle.innerText = originDocTitleContent;
  })
  	return (
      <button type="button" onClick={() => setCount(count - 1)}>
        count down ({count})
      </button>
  )
}

useEffect()는 전달 받은 함수를 DOM 업데이트 이후 시점에 실행한다.
설정된 함수는 컴포넌트 내부에 위치해 있어 컴포넌트의 state, props에 접근할 수 있다.
컴포넌트 렌더링(componentDidMount), 업데이트 이후(componentDidUpdate)시점에 빠짐없이 실행된다.

컴포넌트 제거 이전 시점

필요한 경우, 컴포넌트가 제거 되기 전(componentWillUnmount)에 특정 코드를 실행하도록 설정 가능

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

function CountDown(props) {
  const [count, setCount] = useState(10);
  useEffect(() => {
    ...
    // 컴포넌트가 제거 될때 실행될 함수
    return () => {
      clearTimeout(timeoutID):
    }
  });
  return (...)
}

이펙트 함수 성능 이슈

매번 렌더링, 업데이트 과정에서 이펙트 함수가 실행될 경우 성능에 악영향을 끼친다.
비교 과정을 통해 변경 사항이 발생할 때만 이펙트 함수가 실행된다면 성능 문제를 해결할 수 있다.
useEffect()에 두번째 인자로 배열값 안에 비교할 데이터(state,props)를 넣는다.
빈 배열일 경우 componentDidMount만 실행 (첫 렌더링 한번)

useEffect(
  () => {...},
  [count] // count 값이 변할 때 마다 실행됨
)

useCallback

클래스 컴포넌트에 멤버변수는 컴포넌트가 만들어질때 한번만 만들어지고 render()만 반복적으로 호출되는 반면에 함수형 컴포넌트는 함수라 컴포넌트가 변경이되면 블록 전체가 계속 반복해서 호출이 된다.
즉, 함수형 컴포넌트는 props나 state가 변경이될 때마다 함수 안에 있는 변수나 함수들이 새로운 값으로 대체됨.

반면 hooks들은 리액트가 알아서 자동으로 기억하므로 아무리 많이 호출해도 연결된 data는 따로 메모리에 저장되있어 값을 재사용한다.

props로 넘기는 콜백함수가 있으면 컴포넌트가 렌더링 될 때마다 새로운 값으로 대체되면서 props의 변화로 re-rendering되는 Side Effect(부작용)이 생긴다.
이런 부작용을 방지하고자 사용하는 것이useCallback()

useRef

useRef()는 실제 DOM 노드를 참조(Ref.)할 경우 사용
참조 대상의 변경이 필요한 경우 .current 속성을 사용

import React, { useRef } from 'react'; // import hook

const buttonRef  = useRef(null); // useRef hook 생성

<button ref={buttonRef}> // useRef 설정

useRef()를 사용해 실제 DOM 노드를 조작한 경우, 컴포넌트가 다시 그려지지 않는다.
무족건 state 또는 props가 변경이 되어야 업데이트!!
만약 실제 DOM 노드 변경을 감지해 특정 코드를 수행하고자 한다면 useCallback() 훅을 사용

/*
  useCallback() 훅을 사용해 참조 된 실제 DOM 노드의 width 값이 변경되면
  컴포넌트 state를 업데이트하여 컴포넌트를 다시 그림
*/
const [width, setWidth] = useState(0);
// 실제 DOM 노드를 콜백 참조(Callback Ref.)하여 변경 감지시 컴포넌트 리렌더링
const domPanelEl = useCallback((node) => {
  if (node !== null) {
    setWidth(node.getBoundingClientRect().width);
  }
}, []);

useContext

useContext()훅은 컨텍스트 객체의 현재 값(value)을 소비(Consumer)할 수 있도록 설정한다.

import React, { useContext } from 'react';
import AuthContext from '../context/AuthContext';

function SignIn(props) {
  const authContext = useContext(AuthContext);
  const { isAuth, signIn } = authContext;
  return (
    {
      isAuth ?
      	<div className="signed">로그인 됨</div> :
        <button type="button" onClick={() => signIn}>로그인</button>
    }
  )
}

useContext() 훅은 클래스 컴포넌트의 static contextType 또는
<Context.Consumer>와 동일하며, 컨텍스트를 읽고, 변경사항을 구독하는 것만 가능
컨텍스트의 값(value)을 변경하려면 <Context.Provider>가 필요

Custome Hook

여러 컴포넌트에서 재사용 될 수 있는 로직들을 커스텀 훅으로 정의해서 사용

훅은 기능이라기 보다는 컨벤션(Convention, 협의)에 가깝다.
훅은 use로 시작하는 이름을 갖는 약속된 함수

// 카운트 다운 상태를 반환하는 커스텀 훅
import React, { useState } from 'react';

// 사용자 정의 훅
function useCountDownStatus(count) {
  const [countStatus, setCountStatus] = useState('완료 전');
  if (count === 0) {
    setCountStatus('완료');
  }
  return countStatus;
}

export default useCountDownStatus

정의한 커스텀 훅을 재사용할 수 있다.

import useCountDownStatus from '../hooks/useCountDownStatus';
const CountDownStatusMessage = ({ count }) => {
  const countStatus = useCountDownStatus(count);
  return countStatus === '완료' ?
    <div>완료 됨</div> :
    <div>카운트 다운 중..</div>
}