Hook

React Hook은 16.8 버전부터 새로 추가된 기능이다.

Hook은 함수형 컴포넌트에서 React state와 생명주기 기능을 연동(hook into) 할 수 있게 해주는 함수라고 한다.

Hook은 class 안에서는 동작하지 않으며, 대신 class 없이 React를 사용할 수 있게 해주는 것이라고 합니다

앞에 use 가 들어가면 대부분 Hook이다.

 

React의 주요 Hook 중에서 useState, useEffect, useContext, useRef에 대해 알아보자

 

1. useState

useState는 컴포넌트에서 상태(state)를 관리할 수 있도록 해주는 Hook입니다

import { useState } from "react";

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

  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

 

• useState(초기값)을 사용하여 상태를 생성하고,
• 상태값과 이를 변경할 수 있는 함수 [state, setState]를 반환합니다.

2. useEffect

useEffect는 컴포넌트가 렌더링 될 때 특정 동작을 수행하도록 하는 Hook입니다.

import { useState, useEffect } from "react";

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((prev) => prev + 1);
    }, 1000);

    return () => clearInterval(interval); // 컴포넌트가 언마운트될 때 정리
  }, []);

  return <p>경과 시간: {seconds}초</p>;
}

 

 

• 첫 번째 매개변수: 실행할 함수
• 두 번째 매개변수: 의존성 배열 (빈 배열 []이면 최초 한 번만 실행)
• 반환하는 함수는 정리(clean-up) 함수 (언마운트 시 실행)

3. useContext

useContext는 전역 상태를 쉽게 공유할 수 있도록 해주는 Hook입니다.

import { createContext, useContext } from "react";

const ThemeContext = createContext("light");

function ThemeComponent() {
  const theme = useContext(ThemeContext);
  return <p>현재 테마: {theme}</p>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemeComponent />
    </ThemeContext.Provider>
  );
}

 

 

• createContext(defaultValue)로 콘텍스트 생성
• useContext(Context)를 사용하여 콘텍스트 값을 가져옴
• Provider를 통해 하위 컴포넌트에 값 전달

4. useRef

useRef는 요소에 직접 접근하거나, 값이 변경되어도 리렌더링이 필요 없는 데이터를 저장하는 데 사용됩니다.

import { useRef, useEffect } from "react";

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

  useEffect(() => {
    inputRef.current.focus(); // 마운트되면 자동으로 포커스
  }, []);

  return <input ref={inputRef} type="text" placeholder="자동 포커스" />;
}

 

 

• useRef는 current 속성을 통해 값을 저장
• 값이 변경되어도 컴포넌트는 다시 렌더링 되지 않음
• DOM 요소에 접근할 때 자주 사용됨

5. custom Hook

리액트에 내장된 이러한 Hook 함수들을 활용해 직접 필요한 훅을 만들 수도 있다고 합니다. 

custom Hook을 활용하면 중복되는 코드를 줄일 수 있고 이전 클래스형 React컴포넌트에서는 불가능했던 로직 공유의 유연성을 제공한다고 합니다.

 

 

 

 

 

강의를 보면서 여러 Hook에 대해서 공부하고 있는데 useState는 저번에 코드를 사용해 봐서 이제 이해가 가는데 나머지 Hook들은 아직 잘 이해가 안간다

다음주에 개인과제가 또 나가니까 그때 사용을 해 봐야겠다.