KEEP CODING

Params 화면을 구성할 때 함께 전달되는 매개변수(parameters)를 말한다. Params 사용하기 params를 사용하기 위해서는 두 가지 과정이 있어야 한다. 1. navigation.navigate() 함수의 두 번째 변수로 params를 전달해야 한다. navigation.navigate('RouteName', { /* params go here */ }) params 는 JSON직렬화가 가능한 형태를 추천한다. (보통 객체 형태로 전달한다) 2. Screen의 구성요소에서 params를 읽어야 한다. function ScreenName({ route }) { /* route.params 으로 사용할 수 있다. */ } params에 관련된 함수들 setParams() params를 변경한..

React Native로 만든 App에서 화면 전환은 어떻게 해야할까? Navigation React Native에서는 화면전환을 위해 navigation을 제공한다. 1. navigation 설치 react-navigation과 stack navigation을 설치한다(stack을 사용하는 경우) npm install @react-navigation/native @react-navigation/native-stack expo를 사용한다면 expo install로 react-native-screens와 react-native-safe-area-content도 같이 설치해준다. expo install react-native-screens react-native-safe-area-context 2. Navi..

ImagePicker ImagePicker는 휴대폰 라이브러리에서 이미지와 비디오를 선택하거나 카메라로 사진을 찍기 위한 시스템 UI에 대한 액세스를 제공한다. ImagePicker 설치하기 expo install expo-image-picker 콘솔을 통해 다운받는다. Image component를 만든다. 프로필 이미지를 띄워주고, 아래의 작은 버튼을 누르면 ImagePicker를 통해 사진을 입력받는다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 // Image.js import React from "react"; import * as ImagePicker from "expo-image-..

파이어베이스에서 createUserWithEmailAndPassword(auth, email, password)를 사용해 회원가입을 진행한다. 회원 가입에는 email과 password만 입력받도록 되어있다. 이름과 사진 정보를 profile에 저장하려면 가입을 진행한 후 updateProfile()을 사용해야 한다. 프로필사진은 firebase storage에 저장해서 사용하고, 나머지는 string으로 된 정보를 저장하면 된다. 회원가입시 이름, email, password, 프로필사진 정보를 모두 입력받아 저장하기 위해서 아래와 같은 순서로 회원가입을 진행한다. 1. 이름, email, password, 프로필사진 입력받는다 2. email, password로 유저를 만든다. 3. 프로필사진을 fi..

위와 같은 로그인 화면을 만들었다. 이메일과 비밀번호를 입력받아 인증받는다. 로그인과 관련해 몇 가지 규칙을 만들어 적용한다. 1. 이메일 형식에 맞는 ID를 입력해야 한다. 2. 공백은 허용되지 않는다. 3. 적절한 ID와 비밀번호를 입력한 경우에만 Sign in 버튼을 활성화시킨다. 1, 2. 이메일 형식 확인, 공백 제거 1 2 3 4 5 6 7 8 9 10 11 12 13 // util.js 에 따로 작성한다 // email형식 확인 export const validateEmail = email => { const regex = /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/; return re..

Firebase를 이용하면 가입된 사용자 인증도 받을 수 있다. 파이어베이스에 임시계정 추가하기 파이어베이스 프로젝트의 Authenification 에 들어가서 임시로 사용할 사용자를 추가한다. (ID, 비밀번호 임의로 정해주면 된다) Firebase 인증 시작하기 react native에서 firebase를 사용하기 위해서는 firebase를 설치하고, firebase 앱 객체를 만들어야 한다 1. firebase를 설치하기 npm install firebase 2. 앱에서 Firebase를 초기화하고 Firebase 앱 객체를 만든다. import { initializeApp } from 'firebase/app'; import config from "../firebase.json"; const ap..

firebase firebase는 google에서 제공하는 모바일 애플리케이션 개발 플랫폼이다. 분석, 인증, 데이터베이스, 구성 설정, 파일 저장, 푸시 메시지 등 많은 기능을 제공한다. 모바일 애플리케이션 개발자는 파이어베이스를 사용하면 사용자경험(UX)개발에 더 집중할 수 있게 된다. firebase 시작하기 https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 구글에서 제공하는 서비스로, 구글 아이디로 로그인하면 무료로 사용할 수 있다. 프로젝트를 만든다. 원하는 이름으로 설정해 프로젝트를 생성한다. Storage 사용하기 파이어..

Context Context를 사용하는 이유는 무엇일까? 어떤 컴포넌트에서든지 상관없이 공통된 자료를 사용하기 위함이다. Context를 통해서는 App 전체적으로 적용되어야 할 색상이나, 글씨체, size등을 공유한다. Styled Component를 사용하면 theme를 받아서 아래와 같이 사용할 수 있다. 1 2 3 const Container = styled.View` background-color: ${({ theme }) => theme.background}; `; Colored by Color Scripter cs theme.background로 어디에서나 동일한 배경색을 사용할 수 있다. Context를 사용해 Component의 style설정하기 그런데 Component에 style로 직..

React를 사용하다보면 여러 컴포넌트를 거쳐서 자료를 전달해야 하거나, 동시에 같은 자료를 사용해야 하는 경우가 생긴다. 최상위 컴포넌트에서 여러 컴포넌트를 거쳐서 자료를 전달하는 방법도 있지만 context API를 사용하면 더 쉽게 관리할 수 있다. 전역으로 상태관리를 더 쉽게 할 수 있다. Context관련 컴포넌트는 크게 두 개로 나눌 수 있다. Provider Component Context의 변화를 하위 컴포넌트에 알린다 Consumer Component 부모 Component 중 가장 가까운 Provider가 전달하는 데이터를 받아서 이용한다. 사용방법 import { createContext } from 'react'; context 사용을 위해 react에서 import한다. const..

위와 같이 진행률을 나타내는 막대를 진행바라고 한다. 보통은 HTML과 JS를 가지고 만들었는데, react-native에서 쉽게 사용할 수 있는 라이브러리가 있어서 사용해봤다. https://github.com/oblador/react-native-progress GitHub - oblador/react-native-progress: Progress indicators and spinners for React Native Progress indicators and spinners for React Native. Contribute to oblador/react-native-progress development by creating an account on GitHub. github.com 1. 라이브러..