6.3.2.2 WriteEditor 만들기

이번에는 WriteEditor 컴포넌트를 만들어봅시다. 이 컴포넌트에서는 TextInput을 두 개 사용해 제목과 내용을 작성하는 기능을 구현할 것입니다.

components 디렉터리에 다음 파일을 작성해보세요.

components/WriteEditor.js

import React from 'react';
import {View, StyleSheet, TextInput} from 'react-native';

function WriteEditor({title, body, onChangeTitle, onChangeBody}) {
  return (
    <View style={styles.block}>
      <TextInput
        placeholder="제목을 입력하세요"
        style={styles.titleInput}
        returnKeyType="next"
        onChangeText={onChangeTitle}
        value={title}
      />
      <TextInput
        placeholder="당신의 오늘을 기록해보세요"
        style={styles.bodyInput}
        multiline
        textAlignVertical="top"
        onChangeText={onChangeBody}
        value={body}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  block: { flex: 1, padding: 16 },
  titleInput: {
    paddingVertical: 0,
    fontSize: 18,
    marginBottom: 16,
    color: "#263238",
    fontWeight: "bold",
  },
  bodyInput: {
    flex: 1,
    fontSize: 16,
    paddingVertical: 0,
    color: "#263238",
  },
});

export default WriteEditor;

두 번째 TextView를 보면 multiline Props에 값이 지정되지 않은 것처럼 보이지요? 컴포넌트를 사용할 때 이렇게 Props의 이름만 쓰고 따로 값을 지정하지 않으면 값이 true로 지정됩니다. 즉, multiline={true}와 동일한 코드입니다. TextView에 이 값이 true로 설정되면 여러 줄을 작성할 수 있습니다.