[React Native] 3-9 작성한 글을 WriteScreen으로 열기

이제 앞으로 만들 기능은 다음과 같습니다.

• 수정하기
• 삭제하기
• 검색하기
• 달력 보여주기

수정하기와 삭제하기 기능을 구현하기에 앞서 사용자가 FeedList에서 항목을 눌렀을 때

 

WriteScreen을 띄워서 기존에 작성한 내용을 보여주는 기능을 구현하겠습니다.

 

components/FeedListItem.js

import React from 'react';
import {Platform, Pressable, StyleSheet, Text, View} from 'react-native';
import {format, formatDistanceToNow} from 'date-fns';
import {useNavigation} from '@react-navigation/native'; //추가

(..)

function FeedListItem({log}) {
  const {title, body, date} = log; // 사용하기 편하게 객체 구조 분해 할당

// ----- 추가 -----
  const navigation = useNavigation();
  const onPress = () => {
    navigation.navigate('Write', {
      log,
    });
  };
// ----------
  return (
    <Pressable
      style={({pressed}) => [
        styles.block,
        Platform.OS === 'ios' && pressed && {backgroundColor: '#efefef'},
      ]}
      android_ripple={{color: '#ededed'}}
      onPress={onPress}> //추가
      <Text style={styles.date}>{formatDate(date)}</Text>
      <Text style={styles.title}>{title}</Text>
      <Text style={styles.body}>{truncate(body)}</Text>
    </Pressable>
  );
}

(...)

 

FeedListItem을 눌렀을 때 WriteScreen이 나타나는지 확인해보세요.

 

---

WriteScreen에서 Log인식하기

이제 WriteScreen에서 log 파라미터를 인식하여 파라미터가 주어졌을 때 

 

제목과 내용의 기본값을 지정해 주겠습니다.

 

screens/WrtieScreen.js

function WriteScreen({route}) {
  const log = route.params?.log;
  const [title, setTitle] = useState(log?.title ?? '');
  const [body, setBody] = useState(log?.body ?? '');
  const navigation = useNavigation();

 

여기서 ?.라는 옵셔널 체이닝문법을 사용하였습니다.

 

이 문법을 사용하면 null 이거나 undefined일 수 있는 객체의 프로퍼티를 에러 없이 접근할 수 있습니다.

 

만약 사용하지 않는다면

const log = route.params ? route.params.log : undefined;

 

이렇게 작성하면 됩니다.

---

수정 기능 구현하기

WriteScreen의 onSave 함수에서 log 라우트 파라미터가 유효하다면 수정하는 함수를 호출하고

 

그렇지 않다면 생성하는 함수를 호출하면 됩니다.

 

contexts/LogContext.js

import {createContext, useState} from 'react';
import React from 'react';
import {v4} from 'uuid';

const LogContext = createContext();

export function LogContextProvider({children}) {
	(...)
    
  const onModify = (modified) => {
    const nextLogs = logs.map((log) => log.id === modified.id ? modified : log)
    setLogs(nextLogs)
  }

  return (
    <LogContext.Provider value={{logs, onCreate, onModify}}>
      {children}
    </LogContext.Provider>
  );
}

export default LogContext;

 

log 배열의 불변성을 지키면서 배열을 업데이트 하기 위해 배열의 내장 함수 map으로

 

저희가 바꾸고 싶은 항목만 교체된 새로운 배열을 생성해 상태를 업데이트하였습니다.

 

screens/WriteScreen.js

const {onCreate, onModify} = useContext(LogContext);
const onSave = () => {
  if (log) {
    onModify({
      id: log.id,
      date: log.date,
      title,
      body,
    });
  } else {
    onCreate({
      body,
      date: new Date().toISOString(),
    });
    navigation.goBack();
  }
};

 

이제 항목을 열어서 수정한뒤 우측 상단의 체크버튼을 누르면

 

저장이 되는것을 확인할 수 있습니다.