6.3.5 WriteScreen에서 텍스트 상태 관리하기

자, 이번에는 WriteScreen에서 제목과 내용 텍스트의 상태를 관리해보겠습니다. 이전에 배운 useState Hook을 사용하면 됩니다.

screens/WriteScreen.js

import React, {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';

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

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

(...)

useState를 써서 만든 상태 값과 업데이트 함수를 WriteEditor에 Props로 전달해주면 됩니다. 간단하지요?