[React] React hook 복습

📌 React Hook

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

📎 Hook의 두가지 규칙

• 최상위에서만 Hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수 내에서 Hook을 사용해서는 안된다.
• 일반 JavaScript 함수에서는 Hook을 호출할 수 없다. React 함수 컴포넌트 내에서만 Hook을 호출해야 한다.

✔️ useState

useState는 현재의 state 값과 이 값을 업데이트하는 함수의 쌍으로 이루어져 있다. 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지된다. state의 초기값을 useState 인자로 설정해줄 수 있고, state는 객체가 아니여도 된다.

import React, { useState } from 'react';

function Example() {
  // "count"라는 새 상태 변수를 선언.
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

위의 예시 코드에서는 state 값으로 count와 함수로 setCount, 초기값으로 0을 설정해주었다. 상태를 변경할 때에는 count를 직접 변경하지 않고, setCount를 이용해 접근해야 한다.

✔️ useEffect

useEffect는 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있도록 해주는 함수이다.

useEffect는 첫번째 매개변수로 컴포넌트가 렌더링될 때마다 실행되는 함수를 받고, 두번째 매개변수로는 의존성 배열을 받는다. 의존성 배열에는 useEffect 함수가 의존하는 상태나 프로퍼티 등의 값이 들어가며, 의존성 배열에 입력된 값이 변경될 때만 useEffect 함수가 실행된다. 만약 두번째 매개변수를 생략한다면, useEffect 함수는 컴포넌트가 업데이트될 때마다, 즉 렌더링될 때마다 항상 실행된다.

import { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  function increase() {
    setCount(count + 1);
  }

  useEffect(() => {
    console.log('useEffect executed!');
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>Click me</button>
    </div>
  );
}

위의 예시 코드에서는 useEffect 함수의 두 번째 매개변수로 state 값 count를 넣었다. 버튼을 클릭할 때마다 count가 변경되므로 useEffect 함수도 함께 실행된다.

✔️ useRef

useRef는 React에서 DOM 요소나 다른 변수에 대한 참조를 저장하는 Hook이다. useRef를 사용하면 DOM 요소의 크기, 위치, 값을 가져오거나, 이전 값과 새 값의 차이를 감지하는 등의 작업을 수행할 수 있다.

import { useRef } from 'react';

function Example() {
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
}

위의 예시 코드에서 useRef를 사용하여 inputRef 변수를 생성하고, input 요소의 ref 속성에 inputRef를 할당하였다. inputRef.current는 실제 DOM 노드를 참조한다. 이를 이용해서 handleClick 함수에서 input 요소에 focus를 줄 수 있다.