6.3.7 Log 작성 기능 마무리하기

이제 Log 작성 기능을 마무리해봅시다. WriteScreen에서 useContext를 사용해 LogContext 값을 받아오고, onSave라는 함수를 만들겠습니다. onSave 함수를 완성하고 WriteHeader에 Props로 넣어주어 체크 버튼을 누를 때 이 함수를 호출합니다.

screens/WriteScreen.js

import {useNavigation} from '@react-navigation/native';
import React, {useContext, useState} from 'react';
import {KeyboardAvoidingView, Platform, StyleSheet} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import WriteEditor from '../components/WriteEditor';
import WriteHeader from '../components/WriteHeader';
import LogContext from '../contexts/LogContext';

function WriteScreen() {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const navigation = useNavigation();

  const {onCreate} = useContext(LogContext);
  const onSave = () => {
    onCreate({
      title,
      body,
      // 날짜를 문자열로 변환
      date: new Date().toISOString(),
    });
    navigation.pop();
  };

  return (
    <SafeAreaView style={styles.block}>
      <KeyboardAvoidingView
        style={styles.avoidingView}
        behavior={Platform.OS === 'ios' ? 'padding' : undefined}>
        <WriteHeader onSave={onSave} />
        <WriteEditor
          title={title}
          body={body}
          onChangeTitle={setTitle}
          onChangeBody={setBody}
        />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

(...)

onSave 함수에서는 onCreate를 호출하고, navigation.pop()을 사용해 이전 화면으로 되돌아가도록 구현해줬습니다.