2. Basic Hooks

Introduction

이번 글에서는 rules of Hooks에 이어서, 기본이 되는 Basic Hooks에 대해서 소개합니다.

1. useState

컴포넌트에 상태 변수를 추가할 수 있게 해주는 기능입니다.

useState는 함수 컴포넌트 내에서 상태 변수를 선언하고 업데이트하는 데 사용됩니다. 다음은 기본적인 사용법입니다:

import { useState } from "react";

export default function Home() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <span>Next.js Example</span>
      <button onClick={() => setCount(count + 1)}>Click me!</button>
      <p>Clicked {count} times.</p>
    </div>
  );
}

조건부 랜더링으로 사용된 예

const [isLoggedIn, setIsLoggedIn] = useState(false);

... 이하 랜더링

{isLoggedIn ? <p>어서오세요!</p> : <p>로그인이 필요합니다.</p>}

배열 및 객체 관리의 예

const [sample, setSample] = useState([]);
const [user, setUser] = useState({ name: '', email: '' });

useState 훅을 사용할 때 주의해야 할 점은 다음과 같습니다.

상태 변수의 초기값은 반드시 첫 번째 인자로 지정해야 합니다.
상태 변수의 값을 변경하는 함수는 두 번째 인자로 전달해야 합니다.
상태 변수의 값을 변경하는 함수는 비동기 함수를 호출하지 않아야 합니다.

2. useEffect

컴포넌트를 외부 시스템과 동기화시킬 수 있게 해주는 기능입니다.

useEffect는 Next.js 및 React에서 부수 효과(side effect)를 처리하는 데 사용되는 훅입니다.
부수 효과란 데이터 가져오기, 구독 설정, 수동으로 DOM 조작 등의 작업을 말합니다.

import React, { useEffect } from 'react';
useEffect(() => {
  // 코드 작성
}, []); // 최초 1회만 실행되도록 정의된 내용

데이터를 받아와서 화면에 출력하는 예

const [data, setData] = useState();

  useEffect(() => {
    async function fetchData() {
      const response = await axios.get("http://example.com/api");
      setData(response.data);
    }

    fetchData();
  }, []);

상태 변수가 바뀌었을 때 동작하는 예

const [text, setText] = useState('텍스트');

useEffect(() => {
  // 코드 작성
}, [text]);

useEffect 훅이 가지는 특징은 다음과 같습니다.

useEffect 훅은 컴포넌트가 처음 렌더링될 때 실행됩니다.
useEffect에서 비동기 작업을 수행할 수 있습니다. 함수 내에서 async, await 키워드를 사용하여 비동기 작업을 처리할 수 있습니다.
useEffect 훅의 첫 번째 인자인 deps 배열에 상태 변수를 포함시키면, 해당 상태 변수의 값이 변경될 때마다 effect 함수가 다시 실행됩니다. 이를 통해 상태 변화에 따라 필요한 작업을 자동으로 수행할 수 있습니다.

useEffect 훅을 사용할 때 주의해야 할 점은 다음과 같습니다.

useEffect는 비동기로 실행되므로, 작성 코드에서 비동기 작업을 수행할 때 주의가 필요합니다.
useEffect에서 상태를 변경하는 경우, 무한루프에 빠지지 않도록 주의가 필요합니다
useEffect는 함수에서 비동기 작업을 수행할 때, 비동기 작업이 완료되기 전에 다음 렌더링이 발생하지 않도록 주의가 필요합니다.

3. useContext

useContext는 React 컴포넌트에서 상태를 공유하고 관리하기 위한 훅 중 하나입니다.

Next.js에서도 React 컴포넌트를 활용하므로 useContext를 사용하여 전역 상태를 관리할 수 있습니다.

이것은 상태 관리 라이브러리를 사용하지 않고 컴포넌트 간에 데이터를 공유하고 전달할 때 유용합니다.

interface ExContextType {
  userName: string;
  setUserName: React.Dispatch<React.SetStateAction<string>>;
}

const context = createContext<ExContextType>();

컴포넌트에서 사용시 아래와 같이 추가합니다.

다른 컴포턴트에서 useContext 훅을 사용하여 context를 가져옵니다.

import { UserContext } from "./contexts/user-context";

...

return (
    <UserContext.Provider value={contextValue}>
      <Routes />
    </UserContext.Provider>
  );

공유된 useContext 훅을 사용하여 사용된 예 입니다.

import { UserContext } from "../contexts/user-context";

export default function ProfilePage() {
  const { userName, setUserName } = useContext(UserContext);
}

useContext 훅을 사용할 때 주의해야 할 점은 다음과 같습니다.