ios14 [React Native] 3-10 삭제 기능 구현하기 context/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); }; // ----추가 ---- const onRemove = id => { const nextLogs =.. 2023. 3. 26. [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'; //추가 (..) functi.. 2023. 3. 20. [React Native] 3-8 스크롤 내렸을 때 글쓰기 버튼 숨기기 스크롤을 내렸을 때 글쓰기 버튼을 숨기기 위해서는 일단 스코롤이 FlatList의 바닥에 가까워졌는지 감지할 수 있어야합니다. { console.log("바닥에 가까워 졌음") }} onEndReachedThreshold={0.85} > 이렇게 하면 콘텐츠의 85% 스크롤 했을 때 onEndReached 함수가 호출 됩니다. 스크롤로 많은 정보를 불로으는 무한스크롤을 구현할 때 이 Props 를 사용하면 유용한데 저희는 아직 사용하지 못합니다. 그래서 저희는 onEndReached를 사용하는 대신 onScrool 이벤트를 사용할 것입니다. onScroll 이벤트를 사용하면 콘텐츠의 전체 크기와 스크롤의 위치를 알아낼 수 있습니다. components/FeedList.js import React from .. 2023. 3. 18. [React Native] 3-6 LogContext로 배열 상태 관리하기 이제 WriteScreen 우측 상단의 체크 버튼을 누르면 현재 작성한 제목과 내용을 LogContext 안의 배열에 추가하는 기능을 구현해보겠습니다. 기존에 LogContext에서 만든 text 상태는 지우고 logs라는 배열을 useState로 상태 관리 하겠습니다. 그 다음에 LogContext.Provider의 value에 이 logs 배열을 객체로 감싸서 넣겠습니다. 객체로 감싸는 이유는 추후 logs 배열 외에도 상테에 변화룰 주는 다른 함수가 들어가기 때문입니다. comtexts/LogContext.js import {createContext, useState} from 'react'; import React from 'react'; const LogContext = createContext.. 2023. 3. 15. 이전 1 2 3 4 다음 반응형
