그리고 프로젝트 최상위 디렉터리에 있는 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보다 먼저 사용됐죠? 이렇게 하면 새로 만든 객체가 맨 앞에 추가됩니다.

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