7.2.1 LogContext에 onModify 함수 구현하기

LogContext에서 항목을 수정할 수 있는 onModify라는 함수를 구현해줍시다.

contexts/LogContext.js

import React from 'react';
import {createContext, useState} from 'react';
import {v4 as uuidv4} from 'uuid';

const LogContext = createContext();

export function LogContextProvider({children}) {
  (...)

  const onModify = (modified) => {
    // logs 배열을 순회해 id가 일치하면 log를 교체하고 그렇지 않으면 유지
    const nextLogs = logs.map((log) =>
      log.id === modified.id ? modified : log,
    );
    setLogs(nextLogs);
  };
  return (
    <LogContext.Provider value={{logs, onCreate, onModify}}>
      {children}
    </LogContext.Provider>
  );
}

export default LogContext;

logs 배열의 불변성을 지키면서 배열을 업데이트하기 위해 배열의 내장 함수 map으로 우리가 바꾸고 싶은 항목만 교체된 새로운 배열을 생성해 상태를 업데이트해줬습니다.