React Hooks

컴포넌트에서 데이터를 관리(State)하고 데이터가 변경될 때 상호작용(Effect)을 하기 위해 사용한다.
리액트 v16.8 에 새로 도입된 새로운 기능으로, class없이 state를 사용할 수 있다.
원래 함수형 컴포넌트에서는 클래스 컴포넌트의 장점인 state 사용이나 life cycle을 직접 다루는 등의 기능을 사용할 수 없었다.
이를 해결하기 위해 등장한 것이 Hook이다.

💥 유의사항

---

• Hook은 React 함수 내에서만 사용 가능
• Hook의 이름은 반드시 'use'로 시작해야함
• Hook은 최상위 레벨에서만 호출 가능
  (if문, for문, 콜백함수 등의 내에서 호출 X)

React에서 기본적으로 지원하는 Hooks

---

useState

• 컴포넌트 내 동적인 데이터를 관리
• state는 읽기 전용이므로 직접 수정 X
• state 변경을 위해서는 setState를 사용
• state 변경 시 자동으로 컴포넌트 재렌더링

// React에 기본적으로 내장되어 있는 useState 훅을 사용해 state 생성
import { useState } from "react";

// 초기값 설정
const [isLoggedIn, setIsLoggedIn] = useState(false);

// setState를 이용해 state 값 변경
setIsLoggedIn(true);

useEffect

const App = () => {
  useEffect(EffectCallback, Deps?)
}

• Deps : 변경을 감지할 변수들의 집합 (배열) / EffectCallback : Deps에 지정된 변수가 변경될 때 실행할 함수
• 함수 컴포넌트에서 side effect 수행 가능
  (side effect : 함수 외부에서 로컬의 상태 값을 변경하는 동작)
• 컴포넌트 최초 렌더링 시 or 어떤 변수가 변경될 때마다 특정 기능 작동 가능
• componentDidMount, componentDidUpadte, componentWillUnmount를 useEffect를 이용해서 처리 가능

const App = () => {
  const [count, setCount] = useState(0)
  
  // 컴포넌트가 최초로 렌더링될 때, count가 변경될 때마다 콜백함수 호출
  useEffect(() => {
  	console.log('버튼을 ${count}회 클릭했습니다.')
  }, [count])
  
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
      클릭하세요
      </button>
    </div>
  )
}

useEffect의 이펙트 함수 내에서 다른 함수를 return할 경우, state가 변경되어 컴포넌트가 다시 렌더링되기 전과 컴포넌트가 없어질 때(Destroy) 호출할 함수를 지정할 수 있다.

const App = () => {
  useEffect(() => {
  // State가 변경될 때(Updating), 컴포넌트를 렌더링할 때(Mounting) 호출됨
    const intervalId = setInterval(() => {
    console.log("안녕하세요");
  }, 1000);
    
  // 컴포넌트를 재렌더링 하기 전, 컴포넌트가 없어질 때 호출됨(Unmounting)
  return () => {
  	clearInterval(intervalId);
  }
}, [])

useRef

• 컴포넌트 생애 주기 내에서 유지할 ref 객체를 반환
• ref 객체는 current 프로퍼티를 가짐 (자유롭게 변경 가능)
• 일반적으로 React에서 DOM 엘리먼트에 접근할 때 사용
  (DOM 엘리먼트의 ref 속성 이용)
• useRef에 의해 반환된 ref 객체가 변경되어도 컴포넌트 재렌더링 X

const App = () => {
  const inputRef = useRef(null)
  
  const onButtonClick = () => {
  	inputRef.current.focus()
  }
  
  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={onButtonClick}>input으로 포커스</button>
    </div>
  )
}

useMemo

• 지정한 state나 props가 변경될 때, 해당 값을 활용해 계산된 값을 메모이제이션하여 재렌더링 시 불필요한 연산을 줄임
• 렌더링 단계에서 이루어지므로, 시간이 오래 걸리는 로직은 작성 X

const App = () => {
  const [firstName, setFirstName] = useState('철수')
  const [lastName, setLastName] = useState('김')
  
  // 이름과 성이 바뀔 때마다 풀네임을 메모이제이션
  const fullName = useMemo(() => {
  	return `${firstName} ${lastName}`
  }, [firstName, lastName])
}

useCallback

• 함수를 메모이제이션하기 위해 사용
• 컴포넌트 재렌더링될 때, 불필요하게 함수가 다시 생성되는 것을 방지
• useMemo(() => fn, deps) 와 useCallback(fn, deps) 는 동일함

const App = () => {
  const [firstName, setFirstName] = useState('철수')
  const [lastName, setLastName] = useState('김')
  
  // 이름과 성이 바뀔 때마다
  // 풀네임을 return하는 함수를 메모이제이션
  const getfullName = useCallback(() => {
  	return `${firstName} ${lastName}`
  }, [firstName, lastName])
  
  return <>{getfullname}</>
}