리액트 네이티브를 다루는 기술13 [React Native] 3-6 글 목록 보여주기 FeedListItem 컴포넌트 만들기 먼저 FeedListItem 컴포넌트를 만들어야 합니다. 이 컴포넌트는 log 객체를 Props로 받아와서 알맞은 위치에 보여줄 것 입니다. 글 목록에서 화면에 body를 보여줄 때는 전체 내용을 보여주지 않습니다. 줄 바꿈 문자를 모두 없애야하고, 길이가 100자 이상이면 줄임표를 사용해야합니다. 이런 작업을 하는 truncate라는 함수도 따로 선언해주겠습니다. 그리고 추후 이 항목을 선택하려면 WriteScreen을 다시 띄워서 전체 내용을 볼 수 있게 해줘야 하기 때문에 Pressable 컴포넌트도 사용할 것입니다. components/FeedListItem.js import React from 'react'; import {Platform, Pressabl.. 2023. 3. 16. [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. [React Native] 3-5 useRef로 컴포넌트 래퍼런스 선택하기 useRef는 함수 컴포넌트 에서 컴포넌트의 래퍼런스를 선택 할 수 있게 하는 Hook입니다. 제목을 입력후 Enter을 누르면 포커스를 이동시키고 싶다면 이럴 때는 내용의 TextInput의 래퍼런스를 포커스 해줘야합니다 componets/WriteEditor.js import React, {useRef} from 'react'; import {View, StyleSheet, TextInput} from 'react-native'; function WriteEditor({title, body, onChangeTitle, onChangeBody}) { const bodyRef = useRef(); return ( ); } const styles = StyleSheet.create({ block: { fl.. 2023. 3. 15. [React Native] 3-4 WriteScreen 준비하기 screens/RootStack.js import React from 'react'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import MainTab from './MainTab'; import WriteScreen from './WriteScreen'; const Stack = createNativeStackNavigator(); function RootStack() { return ( ); } export default RootStack; 일단 WriteScreen의 기본적으로 보이는 헤더를 숨겼습니다. 다음으론 WriteScreen에서 사용할 헤더를 직접 만들겠습니다. components/WriteHea.. 2023. 3. 14. 이전 1 2 3 4 다음 반응형
