6.3.6 LogContext로 배열 상태 관리하기

이제 WriteScreen 우측 상단의 체크 버튼을 누르면 현재 작성한 제목과 내용을 LogContext 안의 배열에 추가하는 기능을 구현해봅시다. 기존에 LogContext에 만든 text 상태는 지우고, logs라는 배열을 useState로 상태 관리해주세요. 그다음에는 LogContext.Provider의 value에 이 logs 배열을 객체로 감싸서 넣어주세요. 객체로 감싸서 넣어주는 이유는 추후 logs 배열 외에도 상태에 변화를 주는 함수를 같이 넣어줄 것이기 때문입니다.

contexts/LogContext.js

import React from 'react';
import {createContext, useState} from 'react';

const LogContext = createContext();

export function LogContextProvider({children}) {
  const [logs, setLogs] = useState([]);
  return <LogContext.Provider value={{logs}}>{children}</LogContext.Provider>;
}

export default LogContext;

이제 제목과 내용을 받아와서 배열에 추가하는 onCreate라는 함수를 만들어볼 텐데, 배열에 항목을 추가할 때는 고유한 값이 있어야 합니다. 이전에 할일 목록을 만들 때는 배열 내 항목들의 id 최댓값을 사용했습니다. 이번에는 그렇게 구현하지 않고, 고유한 값을 생성해주는 uuid라는 라이브러리를 사용하겠습니다.