context로 global data 관리
React에서는 주로 parent 컴포넌트에서 child 컴포넌트로 props를 이용해 데이터를 넘긴다. 이때 많은 데이터에서 공통적으로 필요로하는 데이터가 있다면 props를 통해 데이터를 넘기려면 불편하기도하고 비효율적이라는 생각이 든다. 이럴 때 사용할 수 있는 것이 Context이다. 직접적으로 props를 통해 데이터를 넘기지 않아도 아무 컴포넌트에서나 접근이 가능하도록 하는 기능이다. Prop drillingprops를 통해 데이터를 전달하다보면 데이터가 직접 필요한 컴포넌트와 데이터를 처음에 가지고 있던 컴포넌트 사이에 거리가 먼 경우가 있다. 그 사이에 컴포넌트는 데이터가 필요하지 않음에도 계속해서 전달해야 하는데 이런 현상을 prop drilling이라고 한다. 번거롭게 넘길 필요 없이 데이터를 아무데서나 쓸 수 있도록 할 때 사용할 수 있는 것이 Context이다. ContextContext를 사용하면 부모 컴포넌트에서 정의한 데이터를 모든 자식...
React Native 폰트 적용하기 (native-base)
폰트 적용하는데 꽤 어려움을 겪었다. 그래서 내용을 정리 해놓으려 한다. iOS와 Android 각각 적용해야 한다. 구글링을 하다보니 react-native-asset을 쓰는 방법도 있는 것 같은데 나는 아래의 방법으로 적용했다. 참고한 블로그들이 정말 도움이 많이 되었다. iOSios/Fonts 폴더를 만들어서 그 안에 폰트 파일을 복사한다. xcode를 실행하고 왼쪽 상단의 프로젝트명을 오른쪽 클릭하여 Add Files to "project_name"을 클릭한다. 방금 생성한 ios/Fonts를 선택하고 아래와 같은 옵션으로 Add 버튼을 누른다. 왼쪽 상단의 프로젝트명을 누르고 나타나는 창에서 TARGETS를 프로젝트명을 선택한다. 위에 나타나는 탭에서 Info를 선택하여 Fonts provided by application key를 찾아 폰트명으로 항목을 하나씩 추가시킨다. 파일 형식과 소문자, 대문자 모두 똑같이 입력해야 오류가 발생하지...
Reat hooks 정리
사용할 때마다 틈틈이 정리해놓기 ✨ useMemo리렌더링 과정에서 사용할 수 있는 캐싱 기법이다. 함수형 컴포넌트는 렌더링 > 컴포넌트 함수 호출 > 내부 변수 초기화 과정을 거쳐 렌더링되는데 이 때 내부 변수 초기화에 무거운 연산이 포함된 경우 성능이 저하될 것이다. 이런 경우 연산된 결과를 메모리에 저장해놓고 필요한 경우에 불러올 때 사용하는 것이 useMemo이다. useMemo를 사용하는 경우 의존성 배열에 들어있는 값에 변화가 있을 때만 재연산한다. 의존성 배열에 빈 배열이 들어오면 매 렌더링에 실행된다. 사용법123456789import { useMemo } from 'react';function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ...
React Native bottom modal 넣기
내가 선택한 라이브러리는 @gorhom/bottom-sheet이다. 위클리 다운로드 10만을 넘는 라이브러리로 깔끔한 도큐먼트 페이지도 있어 믿고 사용할 수 있었다. (공식 홈페이지) Installation작성일 기준 설치방법이다. 1yarn add @gorhom/bottom-sheet@^4 추가로 설치가 필요한 라이브러리가 있다. expo 사용하지 않는 경우 1yarn add react-native-reanimated react-native-gesture-handler expo 사용하는 경우 1expo install react-native-reanimated react-native-gesture-handler ReactNative v0.63 이상을 사용한다면 Fabric 구조로 프로젝트가 구성되며 이 경우 react-native-gesture-handler v2.0 이상을 사용해야 한다. babel pluginbabel.config.js 파일 수정이...
React Native Animated로 애니메이션 구현하기
Animated란 React Native에서 애니메이션을 구현하기 위해 사용되는 라이브러리이다. Animated는 start/stop 메소드를 사용해 시간에 따른 애니메이션 전환을 실행시킨다. 주요 개념 Animated.Value: 애니메이션을 입힐 컴포넌트에 대한 하나 이상의 style 속성 Animated.timing(): 애니메이션을 업데이트 하는 메소드 이 때 애니메이션 value에 직접 접근해서는 안된다. useRef 훅을 써서 mutable ref를 사용하도록 한다. 사용 예avaa 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162const App = () => { // fadeAnim will be used as the value for opacity. Initial Value: 0 ...
React Native 휴대폰 설정 화면 열기
OS 별로 설정 화면을 여는 메서드가 다르다. 다음에도 참고 하기 위해 기록해둔다. LinkingReact Native의 기본 모듈 Linking을 사용하면 쉽게 구현할 수 있다. Linking은 App link를 사용할 수 있는 인터페이스이다. https://, http:// 는 웹 사이트에서 사용하는 URL 스키마이다. 마찬가지로 휴대폰에서 사용되는 링크가 있다. 전화를 걸기 위해 사용되는 링크, 메일을 송신하기 위해 사용되는 링크 등. 슬랙의 app link는 slack://으로 시작한다. 이런 app link를 가지고 OS가 작업을 처리하도록 할 수 있다. 이런 동작을 deep linking 이라고 한다. 플랫폼 확인 하는 법1console.log(Platform.OS) // 'ios' or 'android'...
React useRef hook 사용하기
useRef는 렌더링이 될 필요 없는 값을 참조하기 위한 리액트 훅이다. 사용법1const ref = useRef(initialValue) useRef는 current라는 한 개의 프로퍼티를 가지는 ref object를 반환한다. 초기 값은 initialValue 값이 된다. 값을 저장하고 있다는 점에서 useState와 비슷하게 느껴지지만 useState와 다르게 useRef는 current 프로퍼티를 수정하여 값을 바꿀 수 있다. (useState는 setValue 함수를 사용해야 값을 수정할 수 있음) ref는 단순 JavaScript object로 리액트는 값이 수정되었는지 어떤지 알 지 못한다. 그래서 ref.current 값이 바뀌어도 리액트는 화면을 re-render 하지 않는다. 사용 예123456789101112import { useRef } from 'react';function Stopwatch() { ...
React Native 기기 사용 권한 설정하기
Application permission 이란 앱에서 장치 수준 기능에 대한 액세스를 제어하고 규제하는 수단이다. 일반적으로는 카메라나 위치 정보 접근과 같은 장치의 하드웨어 기능 및 개인 데이터 액세스 기능과 같이 개인 정보에 영향을 미칠 수 있는 기능이 포함된다. React Native 문서에는 Android 권한을 다루는 PermissionsAndroid에 대한 설명은 나와있는데 IOS 관련 내용은 없었다. 보통 두 OS를 공통으로 처리하기 위해 react-native-permissions 라이브러리를 많이 사용한다고 한다. 권한을 요청할 뿐 아니라 권한을 얻지 못했을 때의 동작을 핸들링하려면 직접 처리하는 작업은 꼭 필요해 보인다. 설치github READ.me를 참고하여 설치할 수 있다. 1yarn add react-native-permissions IOS‘Podfile’을 업데이트 하고 pod install을 실행해야 한다. Podfile에서 아래에 해당하는...
head meta 태그로 Kakao 메세지 미리보기 설정하기
og (Open Graph) Tag카카오톡 메세지에 URL만 붙여넣어도 컨텐츠의 이름, 썸네일, 설명이 나타날 때가 있다. head 내부에 meta 태그로 데이터를 넘기면 카카오톡에서 링크를 읽어 미리보기를 띄워주는 것이다.링크 공유시 투박한 링크만 뜨는 것 보다 당연히 미리보기가 나타나는 것이 서비스에 좋을 것이다. 태그를 추가함으로써 검색이 더 잘 된다는 말도 있는데 사실인지는 모르겠다. 사용법필요한 태그를 추가하면 된다. 공식 사이트를 참조하면 쉽게 사용할 수 있다. 태그는 <head> 안에 <meta> 태그로 넣으면 된다. 123456<head> <meta property="og:title" content="Open Graph protocol"> <meta property="og:type" content="website"> ...
Jest function mocking과 context
문제테스트 코드를 작성하던 중 함수가 실행되었는지 테스트하는 부분이 계속 정상적으로 실행되지 않았다. 콘솔을 찍어보면 실행된 것은 확실한데 실행 횟수는 0으로 나오는 상황이었다. original.ts 12export function foo() {return 'foo'}export function bar() {foo()} original.spec.ts 12345678import {bar} from 'original';const spy = jest.spyOn( original, 'foo',);bar();expect(spy).toBeCalled(); // assert 문 Fail! 에러는 다음과 같았다. 12345Fail expect(jest.fn()).toBeCalled() Expected number of calls: >= 1 ...