React hooks 사용법

리액트에선 다양한 목적으로 사용되는 hooks가 존재한다.
다양한 hooks들의 각각의 처리시키는 일을 알아보자.

hooks 사용하기 위한 규칙

hooks를 사용하기 위해선 지켜야할 규칙이 있다.

• 1. 반드시 네이밍은 use~로 시작해야한다.
• 2. 반복문이나 조건문에서 사용이 불가하며 항상 컴포넌트 최상위 위치에 있어야한다.
• 3. 리액트 컴포넌트와 hooks 파일에서만 사용가능하다.

자, 이제 hooks의 종류를 알아보자.

useState

useState 는 컴포넌트 안에서 상태를 업데이트하여 리렌더링을 발생시킨다.
주 사용목적은, UI 상태를 업데이트를 하기 위해 사용한다. 두개의 요소가 들어가있는 배열을 반환하는데, 첫 요소는 현재 상태값을 나타내며 두번째 요소는 업데이트 한 상태값을 나타낸다.

import { useState } from 'react'

function Counter() {
  const [random, setRandom] = useState(0)

  const onClick = () => {
    const random = Math.floor(Math.random() * 10)
    setRandom(random)
  }
  
  return (
    <div>
      <p>{random}</p>
      <button onClick={onClick}>버튼</button>
    </div>
  )
}

export default Counter

useEffect

useEffect 는 컴포넌트의 특정한 상태가 변경이 되었을때 사용을 한다.
첫번째 인자는 실행할 함수를 넣는다. 두번째 인자는 함수 안에서 사용되는 컴포넌트 상태를 의존성배열에 넣는다.

import { useState, useEffect } from 'react'

function Counter() {
  const [random, setRandom] = useState(0)

  const onClick = () => {
    const random = Math.floor(Math.random() * 10)
    setRandom(random)
  }

  useEffect(() => {
    console.log('최초 렌더링 시 출력')
  }, [])

  useEffect(() => {
    console.log('의존성 배열의 값이 변경 되었을 시 출력')
    console.log(`random : ${random}`)
  }, [random])

  useEffect(() => {
    console.log('최초 렌더링 되거나 아무거나 변경되었을 시에 출력')
  })
  return (
    // ...
  )
}

export default Counter

useCallback, useMemo

useCallback 과 useMemo 의 공통점이 있는데, 그건 바로 사용했던 함수를 재사용을 가능하게 한다는것이다.
즉, 메모이제이션 을 한다는것인데

메모이제이션이란?
이전 계산을 통해 만들어진 값을 메모리에 저장하여 연산 과정을 생략하고 재사용을 하는것

이 hooks들 또한 useEffect와 같이 의존성배열에 컴포넌트 상태를 넣는다.

import { useState, useCallback } from 'react'

const Counter = () => {
	const [count, setCount] = useState(0)

	const printCount = useCallback(() => {
		console.log(count)
	}, [count])
}

export default Counter

useRef

useRef 는 컴포넌트내에서 리렌더링이 필요하지 않는 상태 를 업데이트를 하거나, 특정 DOM 요소에 접근을 할때 사용한다.

리렌더링이 필요하지 않는 상태란?
화면에 시각적으로 보이지 않는 상태가 대표적으로 해당
사용자의 반응에 따라서 바로 바뀌는 UI에게는 적합하지 않음

useRef 객체의 값을 변경하는 경우에는 컴포넌트가 리렌더링 되지 않는다.
각 JSX 태그의 ref 속성에다가 useRef 훅으로 생성된 객체를 넣어주면된다.