react native (5) 썸네일형 리스트형 [RN] Hooks (useState, useEffect, useRef) Hooks React 16.8 버전에서 새롭게 추가된 기능이다. 이전에는 컴포넌트의 상태를 관리하거나 생명 주기에 따라 특정 작업을 수행하려면 클래스형 컴포넌트를 사용해야 했지만, Hooks를 이용할 수 있게 되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었고 컴포넌트의 생명 주기에 맞춰 특정 작업을 수행할 수 있게 되었음. 컴포넌트의 생명 주기 모든 컴포넌트는 생성 → 업데이트 → 제거 의 생명주기를 갖는다. 생명주기의 때에 따라 어떤 작업을 처리해야 하는지 지정해주어야 불필요한 업데이트를 방지할 수 있다. 따라서 Hooks를 써서 컴포넌트의 생명 주기에 맞춰 원하는 작업을 제때 실행시킬 수 있게 해야 한다. 1. useState const [state, setState] = useState(i.. FCM Token 만료 및 갱신 (3) 토큰의 만료 FCM 토큰은 정해진 수명이나 갱신 주기가 없다. 따라서 시간과 관계없이 아래 이벤트가 발생하지 않는다면 만료되지 않는다. 앱이 인스턴스 ID를 삭제한 경우 앱이 새 기기에서 복원되었을 경우 사용자가 앱을 제거/재설치 한 경우 사용자가 앱 데이터를 지운 경우 토큰의 갱신 상기와 같이 fcm token은 정해진 수명이나 갱신 주기가 없으나, 오래된 토큰은 권장하지 않기 때문에 유효기간(2주)가 지나면 새로운 토큰을 발급받는 것이 좋다. 따라서 마지막 fcm token 발급 시점으로부터 14일 이상 경과한 경우 현재 fcm token을 삭제하고 재 발급한다. // 토큰 삭제 await messaging().deleteToken(); // 재발급 const token = await messagin.. FCM Token 생성 및 권한 설정 (2) 토큰의 생성 앱을 처음 실행할 때 FCM은 클라이언트 앱 인스턴스에 대한 등록 토큰 생성 // React native에서의 토큰 생성 import messaging from '@react-native-firebase/messaging'; const token = await messaging().getToken(); React Native의 경우 android, iOS 설정을 각각 해줘야 한다. iOS 권한 iOS에서는 사용자가 앱에게 알림 권한을 부여하지 않으면 알림 전송을 할 수 없다. 알림 권한 종류 granted not determined(default) declined 사용자가 권한 요청을 거절한다면 다시 요청할 수 없으며, 사용자가 직접 iOS 설정에서 변경해야 한다. // React nativ.. FCMToken이란? (1) FCMToken이란? firebase Cloud Messaging의 약자로, google firebase에서 사용하는 클라우드 메시징 서비스로, 무료로 메세지를 안정적으로 전송할 수 있는 교차 플랫폼 메시징 솔루션이다. 그렇다면 FcmToken은 왜 사용하는가? fcmToken은 어플리케이션에서 사용자에게 푸시 알림을 줄 때 필요하다. fcmToken은 디바이스마다 다르게 부여 되는데, 서버는 이 토큰으로 디바이스를 구분한다. 이 토큰으로 구분하지 않는다면, 서버는 어떤 디바이스에 알림을 줘야하는 것인지 모르기 때문이다. DB의 유저 테이블에 fcm Token 필드를 추가하고, 푸시 알림을 주고자 할 때 유저의 토큰 필드를 조회하여 프론트에 보내주는 방식으로 앱 푸시 알림을 구현할 수 있다. Fireba.. Javascript VS Typescript Javascript란 웹 개발에 주로 사용되며, 웹 페이지를 대화식으로 만드는 프로그래밍 언어 클라이언트 측 스크립팅 언어 객체 지향 프로그래밍 지원 높은 수준의 코드 탐색과 디버깅 자바스크립트 호환 TypeScripte란 자바스크립트를 기반으로 정적 타입 문법을 추가한 프로그래밍 언어 컴파일 언어, 정적 타입 언어 객체 지향 프로그래밍 지원 높은 수준의 코드 탐색과 디버깅 자바스크립트 호환 ➡️ 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠름. React Native에서의 코드 차이 변수 선언 // Javascript const [ data, setData ] = useState([]); const [ text, setText ] = useS.. 이전 1 다음
