분류 전체보기125 [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. [React Native] 3-4 새 글 작성하기 이번엔 WriteScreen의 기능을 구현하겠습니다. 그리고 FeedsScreen에 WriteScreen을 열 수 있는 FloatingWriteButton도 만들어 보겠습니다. 프로젝트에 components 디렉터리를 만들고 그 안에 파일을 작성하세요 components/FloatingWriteButton import React from 'react'; import {View, StyleSheet, Platform, Pressable} from 'react-native'; import Icon from 'react-native-vector-icons/MaterialIcons'; function FloatingWriteButton() { return ( [ styles.button, Platform.OS .. 2023. 3. 14. 이전 1 ··· 4 5 6 7 8 9 10 ··· 32 다음 반응형
