💗 Hook이란?

function component에서 사용되는 몇가지 기술
Class Component의 state 기능을 사용하게 해줌
원하는 시점에 정해진 함수가 실행되도록 (use를 붙여서 Hook임을 명시해야함)

Class Componnet의 단점을 보완하기 위해 나타남

Class Component는 function Component에 비해
어려운 문법, 축소 방식, Reloading시 떨어지느 신뢰성, 최신 기술 적용에 불리함

Class Componente는 Lifecycle methods, state 제공 그동안 Function Component는 비교적 간단하기 때문에 이와 관련된 method가 없었음=

💗 Hook의 종류

✍ 1. useState()

state를 사용하기 위한 Hook
state: 값이 변화게 되면 연관된 컴포넌트들이 재랜더링되는 변수

🔸 사용법

const [state(변수명), setState(set함수명)] = useState(초기값); 

🔸실제 코드

import React, {useState} from 'react';
//useState 호출하기 

function Example(props) {
  const [ count, setCount]=useState(0);
//useState 선언하기 , 'count'라는 새로운 상태 값을 정의
// 인자로 초깃값 받기 
  
  return (
    <div>
      <p>총 {count}번 클릭했습니다</p>
      <button onClick = { () => setCount(count+1)}>
        클릭
      </button>
    </div>
  );
}
//onClick 될 때> setCount안에 있는 함수가 호출되어 count 값에 1추가 

변수 한 개 당 state 값 한개씩 들어가야함

✍ 2. useEffect()

Side Effect?
-React Component 렌더링 후 비동기로 처리해야 하는 효과(ex: 서버에서 데이터 받기), 사용자가 요구한 effect 외의 effect => Hook이 수행 가능하도록 처리

useEffect: React에서 Side Effect를 함수형에서 사용할 수 있게 하는 리액트 Hook, Life Cycle함수의 기능과 같은 기능을 수행

🔸 사용법

useEffect ( function(이펙트 함수), deps(의존성 배열));
//배열 안의 값이 하나라도 변경되었을 때 effect함수가 실행됨
//deps 위치의 배열 안에 검사하고 싶은 값을 넣으면 특정 값이 업데이트 될 때 실행
useEffect ( function(이펙트 함수), []); 
//한번씩만 실행되도록 할 때 의존성 배열 부분에 빈 배열을 넣어야 함 

🔸 사용법 정리

useEffect(() => {
  //컴포넌트가 마운트 된 이후,
  //의존성 배열에 있는 변수들 중 하나라도 값이 변경되었을 때 실행됨
  //의존성 배열에 빈 배열 ([])을 넣으면 마운트와 언마운트시에 단 한번씩만 실행됨
  //의존성 배열 생략 시 컴포넌트 업데이트 시마다 실행됨
  ...
  
  return() => {
    //컴포넌트가 마운트 해제되기 전에 실행됨
    ...
  }
  }, [의존성 변수1, 의존성 변수2 ...]);

🔸 실제 코드

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

function Counter(props){
  count [count, setCount] = useState(0);
  
  //componentDidMount, componentDidUpstate와 비슷하게 작동
  useEffect(()=> {
    //브라우저 api를 사용하여 document의 title을 업데이트 합니다.
    //함수 컴포넌트 안에서 선언되기 때문에 props, state에 접근 가능
    document.title = 'You Clicked ${count} times';
  });
  
  return (
    <div>
       <p>총 {count}번 클릭했습니다</p>
      <button onClick = { () => setCount(count+1)}>
        클릭
      </button>
    </div>
  );
}

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

function UseState(props) {
  const [isOnline, setIsOnline ] = useState(null);
  
  function handleStatusChange(status) {
    setIsOnline(status, isOnline);
  }
  
  useEffect(()=> {
    ServerAPI.subscribeUserStatus(props.user.id handleStatusChange};
            return() => {
    ServerAPI.unsubscribeUserStatus(props.user.id handleStatusChange);
    //컴포넌트가 unmount될 때 호출됨! 
	};
});

  if (isOnline === null ){
    return '대기중....';
  } return isOnline ? '온라인' : '오프라인';
 }

✍ 3. useMemo()

Memoized value를 리턴하는 Hook

Memoization 연산량의 값이 많은 메모리를 저장해 두었다가 필요할 때 다시 계산하지 않고 메모리에서 꺼내서 재사용해서 바로 반환하는 것
Memoization의 결괏값 = Momoized Value

🔸 사용법

const memoizedValue = useMemo(
  () => {
    //연산량이 높은 작업을 수행하여 결과를 반환
    return computeExpensiveValue(의존성 변수1, 의존성 변수2);
  },
  [의존성 변수1, 의존성 변수2]
 );

const value = useMemo (()=>{
  return calculate(); //콜백 함수: 콜백함수가 return하는 값
}, [item]) //의존성 배열: 배열 안의 요소 값이 update될 때만 콜백함수를 다시 호출, Memoization value를 update하여 다시 memoization함

//렌더링이 일어나는 동안 실행되는 것은 useMemo에 넣으면 안됨
//의존성 배열을 넣지 않을 경우, 매 렌더링마다 함수가 실행되므로 useMemo hook을 사용하는 의미가 없어짐
//의존성 배열이 빈 배열일 경우, 컴포넌트 마운트 시에만 호출 됨 

🔸 실제 코드

useMemo를 사용하지 않았을 때

function calculate() {
  return 10 
}

function Component () {
  const value = calculate();
  return (<div>{value}</div>)
}

//Component가 렌더링될 때마다 value 변수가 초기하되어서 calculate함수는 반복적으로 호출됨, 따라서 비효율적

useMemo를 사용했을 때

function claculate() {
  return 10 
}

function Component(){
  const value=useMemo(
    ()=>calculate(), []
    )
  return (<div>{value}</div>)
}
//처음 계산된 결과 값을 메모리에 저장하여 반복적으로 렌더링 되는 경우 계산된 값을 메모리에서 가져와 재사용! 

✍ 4. useCallback()

useMemo()와 비슷하지만 값이 아닌 함수를 반환
함수 자체를 Memoization
재렌더링될 때만이 아니라, 의존성 배열이 바뀔 때만 Memoization에서 함수를 Update

🔸 사용법

const memoizedCallback = useCallback(
  ()=>{
    doSomthing(의존성 변수1, 의존성 변수2);
  }, 
  [의존성 변수1, 의존성 변수2]
  );

useCallback(함수, 의존성 배열); == useMemo(()=>함수, 의존성 배열);

🔸 실제 코드

import { useState, useCallback } from 'react';

function ParentComponent(props) {
  const [count, setCount] = useState(0);
  
  //컴포넌트가 마운트 될 때만 함수가 정의됨
  const handleClick = useCallback((event) => {
    //클릭 이벤트 처리
  } []);
  
  return (
    <div>
      <button
        onClick = (()=>{
          setCount(count+1);
          }}
        >
        {count}
      </button>
      
      <ChildComponent handleClick = {handleClick}/>
      </div>
    );
}

✍ 5. useRef()

Reference를 사용하기 위한 Hook

Reference: 특정 컴포넌트에 접근할 수 있는 객체,
refObject.current: current 속성: 현재 참조하고 있는 element

🔸 사용법

const refContainer = useRef(초깃값);
//해당 초깃값으로 초기화된 refernce객체를 반환 

🔸 실제 코드

function TextInputWithFocusButton(props){
  const isPutElem = useRef(null);
  
  const onButtonClick = () =>{
    //'current'는 마운트된 input element를 가리킴
    inputElem.current.focus();
  };
  
  return (
    <>
      <input ref = {inputElem} type="text"/>
      <button onClick={onButtonClick}>
        Focus the input
      </button>
    </>
    );
}