React Context

유데미 NextJS 강의를 듣던 중 context api를 이용해서 앱 전반 상태를 작업하는 코드를 보았다.
이전까지 단순히 context를 생성하여 provider를 통해 컴포넌트들에게 전달하고 useContext 훅을 사용해서 context를 받아오는 단순한 과정을 거쳤다.

이번에는 context관리 컴포넌트를 따로 만든다. context관리 컴포넌트는 전달할 상태인 context를 컴포넌트 내부에서 정의하고 상태관리를 할 수 있다.

이전 프로젝트에서 한번 사용한 경험이 있었지만 확실하게 내 것이 되지 못해 다시 한번 정리한다.

import { createContext, useContext, useEffect, useState } from 'react';
import { login, logout, onUserStateChange } from '../api/firebase';

const AuthContext = createContext();

export function AuthContextProvider({ children }) {
  const [user, setUser] = useState();

  useEffect(() => {
    onUserStateChange((user) => setUser(user));
  }, []);

  return (
    <AuthContext.Provider
      value={{ user, uid: user && user.uid, login, logout }}
    >
      {children}
    </AuthContext.Provider>
  );
}

export function useAuthContext() {
  return useContext(AuthContext);
}

이렇게 우리가 전달할 context를 컴포넌트 내부에서 변경할 수 있기 때문에 context를 관리하는 컴포넌트를 만들었다.

import { createContext, useState } from "react";

const NotificationContext = createContext({
  notification: null, // {title, message, status}
  showNotification: function (notificationData) {},
  hideNotification: function () {},
});

export function NotificationContextProvider({ children }) {
  const [activeNotification, setActiveNotification] = useState();

  function showNotificationHandler(notificationData) {
    setActiveNotification(notificationData);
  }

  function hideNotificationHandler() {
    setActiveNotification(null);
  }

  const context = {
    notification: activeNotification,
    showNotification: showNotificationHandler,
    hideNotification: hideNotificationHandler,
  };

  return (
    <NotificationContext.Provider value={context}>
      {children}
    </NotificationContext.Provider>
  );
}

export default NotificationContext;

이전 코드랑 마찬가지로 context를 컴포넌트 내부에서 변경가능하도록 구현하였다. 실제 context에 접근하기 위해서는 NotificationContext객체에 접근을 해야한다.
provider를 자식 컴포넌트에 씌워주는 코드는 생략하겠다.

아래 코드는 context에 접근한 후 context관리 컴포넌트에서 정의된 함수를 사용해서 context의 상태를 바꿔주는 코드이다.

import { useContext, useRef } from "react";
import axios from "axios";
import classes from "./newsletter-registration.module.css";
import NotificationContext from "../../store/notification-context";

function NewsletterRegistration() {
  const inputRef = useRef();
  const notificationCtx = useContext(NotificationContext);
  
  function registrationHandler(event) {
    event.preventDefault();

    const enteredInput = inputRef.current.value;

    if (!enteredInput) return;

    notificationCtx.showNotification({
      title: "등록중...",
      message: "새로운 구독자를 등록하는 중입니다...",
      status: "pending",
    });

    axios
      .post("/api/register", {
        email: enteredInput,
      })
      .then((res) => {
        if (res.status === 201) return res.data;
        throw new Error(res.data.message || "에러가 발생했습니다...");
      })
      .then((data) => {
        notificationCtx.showNotification({
          title: "성공!",
          message: "새로운 구독자를 등록했습니다!",
          status: "success",
        });
      })
      .catch((err) => {
        notificationCtx.showNotification({
          title: "실패...❌",
          message: err.message || "에러가 발생했습니다...",
          status: "error",
        });
      })
      .catch((err) => {
        console.error(err.response.data.message);
      });
  }

  return (
    <section className={classes.newsletter}>
      <h2>Sign up to stay updated!</h2>
      <form onSubmit={registrationHandler}>
        <div className={classes.control}>
          <input
            type='email'
            id='email'
            placeholder='Your email'
            aria-label='Your email'
            ref={inputRef}
          />
          <button>Register</button>
        </div>
      </form>
    </section>
  );
}

export default NewsletterRegistration;

코드 뜯어보기

  const notificationCtx = useContext(NotificationContext);
  
  function registrationHandler(event) {
    event.preventDefault();

    const enteredInput = inputRef.current.value;

    if (!enteredInput) return;

    notificationCtx.showNotification({
      title: "등록중...",
      message: "새로운 구독자를 등록하는 중입니다...",
      status: "pending",
    });

useContext로 context에 접근한 후, showNotification메서드에 접근하였다. showNotification메서드는 context provider가 value를 통해 context를 전달할 때 선언되어있는 메서드로 context관리 컴포넌트의 showNotificationHandler함수를 호출한다.

showNotificationHandler함수는 notificationData를 인자로 받아서 상태를 변화시켜주는 함수이다.
즉, 이 함수를 통해 상태가 변화되고 notificationCtx.notification이 인자로 들어온 값으로 상태가 업데이트된다.

이렇게 되면 업데이트된 context에 컴포넌트들이 접근할 수 있게 된다.

단순히 children component에 context를 전달하기위한 목적이 아니라 컴포넌트 내부에서 context 상태를 관리하기 위해 다음과 같이 context관리 컴포넌트를 만들 수 있다는 것을 배웠다.