더북(TheBook)

그리고 프로젝트 최상위 디렉터리에 있는 index.js 파일을 열어서 맨 위에 다음 코드를 추가하세요.

index.js

import 'react-native-get-random-values';

(...)

yarn iosyarn android 명령어를 다시 입력해서 앱을 재시작하면 이제 uuid를 사용할 준비가 끝납니다. onCreate 함수를 구현해 value 객체에 포함해줍시다.

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 [logs, setLogs] = useState([]);

  const onCreate = ({title, body, date}) => {
    const log = {
      id: uuidv4(),
      title,
      body,
      date,
    };
    setLogs([log, ...logs]);
  };
  return (
    <LogContext.Provider value={{logs, onCreate}}>
      {children}
    </LogContext.Provider>
  );
}

export default LogContext;

onCreate 함수에서는 title, body 외에 날짜 값을 위한 date도 받아옵니다. 이 함수에서 log라는 객체를 만들고 spread 연산자를 사용해 새로운 배열 상태를 설정해줬습니다. log...log보다 먼저 사용됐죠? 이렇게 하면 새로 만든 객체가 맨 앞에 추가됩니다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.