React Hooks: 기초부터 심화까지

YoungWhan Kim·2023년 3월 19일
0

Ract

목록 보기
1/6
post-thumbnail

소개

React Hook은 React 16.8 버전에서 새롭게 도입된 기능으로, 클래스 컴포넌트에서만 사용 가능했던 state와 lifecycle 메소드를 함수형 컴포넌트에서도 사용할 수 있게 해준다. 이번 포스팅에서는 React Hook의 기초적인 사용 방법부터, 실제 예제를 통해 심화적인 활용 방법까지 다루어보겠다.

useState Hook

useState Hook은 가장 기본적인 Hook으로, state를 사용할 수 있게 해준다. useState Hook은 초기값을 인자로 받으며, 배열 형태로 현재 state 값과 state를 변경하는 함수를 반환한다.

다음은 useState Hook을 사용하여 버튼 클릭 시 count 값이 증가하는 간단한 예제.

import React, { useState } from "react";

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

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

useState Hook을 사용해 count 값을 0으로 초기화하고, 버튼 클릭 시 setCount 함수를 호출하여 count 값을 증가시킨다.

useEffect Hook

useEffect Hook은 컴포넌트의 lifecycle 메소드와 비슷한 역할을 한다. 컴포넌트가 마운트, 언마운트, 혹은 업데이트될 때 특정 작업을 처리할 수 있도록 해준다. useEffect Hook은 함수를 인자로 받으며, 컴포넌트가 업데이트될 때마다 해당 함수가 실행된다.

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

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

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

위 예제에서는 useEffect Hook을 사용해 document.title을 업데이트하는 간단한 예제다. count 값이 변경될 때마다 useEffect Hook이 실행되어 document.title을 업데이트한다. useEffect Hook의 두 번째 인자로 배열을 전달하면 해당 배열에 포함된 값이 변경될 때만 useEffect Hook이 실행되도록 설정할 수 있다.

useContext Hook

useContext Hook은 React Context를 사용할 때 사용할 수 있는 Hook이다. useContext Hook을 사용하면 Context에 저장된 값을 가져와 사용할 수 있다.

import React, { useContext } from "react";

const MyContext = React.createContext();

function MyComponent() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

function Example() {
  return (
    <MyContext.Provider value={"Hello World"}>
      <MyComponent />
    </MyContext.Provider>
  );
}

위 예제에서는 useContext Hook을 사용해 Context에 저장된 값을 가져오는 간단한 예제다. MyContext.Provider를 사용해 "Hello World" 값을 저장하고, MyComponent에서 useContext Hook을 사용해 해당 값을 출력한다.

useCallback Hook

useCallback Hook은 이벤트 핸들러 함수나 다른 함수를 캐싱하여 성능을 최적화할 수 있도록 해준다.

import React, { useState, useCallback } from "react";

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

  const handleChange = useCallback((e) => {
    setText(e.target.value);
  }, []);

  return (
    <div>
      <p>You clicked {count} times</p>
      <input type="text" value={text} onChange={handleChange} />
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

위 예제에서는 useCallback Hook을 사용해 handleChange 함수를 캐싱하여 최적화한다. 이벤트 핸들러 함수가 자주 호출되는 경우 useCallback Hook을 사용하여 성능을 최적화할 수 있다.

useMemo Hook

useMemo Hook은 계산 비용이 큰 함수의 결과 값을 캐싱하여 성능을 최적화할 수 있도록 해준다.

import React, { useState, useMemo } from "react";

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

  const fibonacci = useMemo(() => {
    function calcFibonacci(n) {
      return n <= 1 ? n : calcFibonacci(n - 1) + calcFibonacci(n - 2);
    }
    return calcFibonacci(count);
  }, [count]);

  return (
    <div>
      <p>The {count}th Fibonacci number is {fibonacci}</p>
      <button onClick={() => setCount(count + 1)}>Calculate next Fibonacci number</button>
    </div>
  );
}

위 예제에서는 useMemo Hook을 사용해 계산 비용이 큰 피보나치 수열 함수의 결과 값을 캐싱하여 성능을 최적화한다. count 값이 변경될 때마다 useMemo Hook이 실행되어 새로운 피보나치 수열 값을 계산한다.

결론

React Hook은 함수형 컴포넌트에서도 state와 lifecycle 메소드를 사용할 수 있게 해주기 때문에, 함수형 컴포넌트를 작성할 때 유용하게 사용된다.

profile
개발자입니다.

0개의 댓글