Jun's TID

이번에는 가장 일반적으로 사용하는 Stack Navigation을 구현하는 컴포넌트를 typeScript를 사용해서 구성해보려고 한다. 기본적으로 아래와 같이 RootStack을 구성할 수 있는데, ◎App.tsx import React from 'react'; import {NavigationContainer} from '@react-navigation/native'; import RootStack from './screens/RootStack.tsx'; const App = () => { return ( ); }; export default App; ◎screens/RootStack.tsx import React from 'react'; import {createNativeStackNavigator}..

typeScript로 contextAPI 를 사용하는 context 컴포넌트를 만들면 createContext로 사용할 전역 변수를 인터페이스로 만들어서 관리가 가능하다는 점과 제네릭 설정을 넣어 null 값에 대한 exception 처리를 손쉽게 할 수 있다는 장점이 있다. 바로 바로 참고할 수 있게 간단한 예제 컴포넌트만 하나 확인해보자. ◎AuthContext.tsx import React, {createContext, useContext, useState} from 'react'; interface User { id: number; username: string; } interface AuthContextValue { user: User | null; setUser(user: User): void..

좀 더 typescript와 친해져보자. 기존에 자주 사용하는 Hook들을 ts를 사용하여 변경하는 예제들을 확인하려고 한다. - useState import React, {useState} from 'react'; import {Button, Text, TextInput, View} from 'react-native'; const MessageForm = () => { // string 타입 const [text, setText] = useState(''); // interface 타입 체크 or null const [lastMessage, setLastMessage] = useState(null); const onPress = () => { setLastMessage({ message: text, d..

타입스크립트의 기본적인 문법을 다뤄봤으니, 이제 이 타입스크립트를 리액트/리액트 네이티브에서 어떻게 사용을 하는 지 확인해보자. Props를 어떻게 사용하여 자식 컴포넌트에 데이터를 전달하는게 JS 환경과 어떤 차이가 있는 지, 기본적인 예제 코드를 한 번 보자. Json 형식을 사용할 수도 있지만, 타입 검사를 위해 interface를 사용한다. ◎ Profile.tsx import React from 'react'; import {Image, StyleSheet, Text, View} from 'react-native'; interface Props { name: string; // normal param isActive?: boolean; // optional param image?: string;..

어떤 언어던, 프레임 워크던 친해지는 데 가장 좋은 방법은 CRUD가 완벽하게 구현된 블로그 프로젝트이다. 이번에도 RN와 Firebase를 사용하여 아주 간단한 SNS 프로젝트를 책을 따라가면서 만들어봤다. 이 프로젝트는 회원 인증, 화면 전환, CRUD, 카메라 & 앨범 제어, 새로고침, 로딩바, 스플레시, 이벤트 Emit 등 다양한 기능이 들어간 Simple SNS 프로젝트이며, 이걸로 내 RN_비기너 타이틀...? 정도는 가질 수 있게 된 거 같다. 늘 그렇듯, 전체 코드를 따라가며 설명하는 건 너무 길고 책에서 설명하는 것과 크게 다르지 않기 때문에 따로 하지 않으려고 한다. Git: https://github.com/Choonham/publicGalleryChoon GitHub - Choonh..

react-native-splash-screen은 React Native 애플리케이션에서 시작 화면(스플래시 스크린)을 쉽게 구현할 수 있게 도와주는 라이브러리이다. 이 라이브러리를 사용하면 앱이 로딩되는 동안 사용자에게 보여줄 초기 화면을 설정할 수 있으며, 앱의 로딩 경험을 개선하는 데 유용하다. 이 글에서는 Android와 iOS 환경에서 각각 셋팅하는 방법과 기본적인 사용 예제에 대하여 설명하려고 한다. yarn add react-native-splash-screen npm install react-native-splash-screen --save Android 환경에서의 셋팅 android/app/src/main/java/[...]/MainActivity.java 파일을 열고, import or..

React Native의 EventEmitter는 컴포넌트나 모듈 간의 이벤트 기반 통신을 가능하게 하는 클래스이다. 이 클래스를 활용하여, 개발자는 특정 이벤트가 발생했을 때 리스너에 알림을 보낼 수 있다. EventEmitter는 주로 네이티브 모듈과 JavaScript 간의 이벤트 통신에 사용되지만, React Native 애플리케이션 내의 다른 용도로도 사용될 수 있다. 이 글에서는 해당 이벤트를 위해 eventemitter3 라는 라이브러리를 사용하려고 한다. yarn add eventemitter3 EventEmitter 사용법 EventEmitter 인스턴스 생성: EventEmitter의 인스턴스를 생성하여 이벤트를 발생시키고, 이에 대한 리스너를 등록한다. 이벤트 리스너 등록: addLi..

react-native-image-picker은 React Native 애플리케이션에서 사용자의 디바이스 갤러리나 카메라를 통해 이미지나 비디오를 선택할 수 있게 해주는 라이브러리이다. 이 라이브러리를 사용하면 사용자가 디바이스에서 미디어를 쉽게 선택하고, 앱 내에서 이를 활용할 수 있게 된다. react-native-image-picker는 iOS와 Android 플랫폼 모두를 지원하며, 다양한 커스터마이징 옵션을 제공한다. 설치는 뭐, 동일하다. yarn add react-native-image-picker npm install react-native-image-picker 이후에는 카메라 접근 권한을 위한 권한 설정을 해줘야 한다. - 권한 설정 ◎Android(android/app/src/main..

React.forwardRef는 React 컴포넌트에서 부모 컴포넌트로부터 받은 ref를 자식 컴포넌트에게 전달하는 기능을 제공한다. 이 기능은 주로 두 가지 상황에서 유용하다. 첫째, DOM 요소나 클래스 컴포넌트 인스턴스에 직접 접근해야 할 때이다. 둘째, 라이브러리와 같은 재사용 가능한 컴포넌트들 사이에서 내부 요소에 ref를 전달해야 할 때 사용된다. React.forwardRef를 사용하는 방법은 다음과 같다. React.forwardRef 함수는 렌더링 함수를 인자로 받는다. 이 함수는 props와 ref를 매개변수로 받으며, React 엘리먼트를 반환한다. 이렇게 함으로써, 부모 컴포넌트에서 전달한 ref가 자식 컴포넌트 내부의 특정 DOM 요소나 컴포넌트 인스턴스에 연결될 수 있다. 아래는..

react-native-community/datetimepicker는 React Native에서 날짜 및 시간 선택 기능을 제공하는 컴포넌트이다. 이 컴포넌트는 Android와 iOS 플랫폼을 모두 지원하며, 사용자에게 친숙한 네이티브 날짜 및 시간 선택 도구를 제공한다. react-native-community/datetimepicker를 사용하기 전에, 먼저 npm 또는 yarn을 사용하여 프로젝트에 설치해야 한다. 설치 명령은 다음과 같다. yarn add @react-native-community/datetimepicker 이제 사용법을 알아보자. 다음은 간단한 날짜 선택기 예시이다. import React, {useState} from 'react'; import {View, Button, Pl..