6장 요점 정리

6장

다이어리 어플 만들기

• 내비게이션 설정
• Context API를 사용한 전역 상태 관리
• Context에서 유동적인 값 다루기
• children Props
• 여러줄 작성 및 포커스 이동
• uuid 라이브러리
• date-fns를 사용한 날짜 포맷팅
• Animated를 사용한 애니메이션 효과

 

 

 

 

 

---

 

 

 

 

 

Context API

리액트에 내장된 기능으로 Props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유

 

Context를 만들 때는 createContext 함수를 사용

Context를 만들면 LogContext.Provider라는 컴포넌트와 LogContext.Consumer라는 컴포넌트가 생성.

Provider는 Context 안에 있는 값을 사용할 컴포넌트들을 감싸주는 용도로 사용

Consumer는 사용하고자하는 컴포넌트에서 값을 가져오고 그걸 감싸는 용도

import {createContext} from 'react';

const LogContext = createContext('안녕하세요');

export default LogContext;

 

 

Provider에는 value라는 Props를 설정하는 데 이 값이 Context를 통해 여러 컴포넌트에서 공유할 수 있는 값

Consumer 대신에 useContext라는 Hook을 사용하면 Context의 값을 훨씬 간결하게 사용 가능. 고로 이걸 써라.

function FeedsScreen() {
  const value = useContext(LogContext);
  return (
    <View style={styles.block}>
      <Text>{value}</Text>
    </View>
  );
}

 

 

 

 

 

---

 

 

 

 

 

Context에서 유동적인 값 다루기

useState를 사용해 관리하는 상태를 Provider로 export해서 넣어주면

값이 바뀔 때마다 useContext를 사용하는 컴포넌트 쪽에서도 리렌더링이 잘 발생할 수 있다.

Provider 를 사용하는 컴포넌트에서 아래처럼 작성하는 것보다 Provider 전용 컴포넌트를 따로 만드는 것이 유지보수성이 더 높다.

 

 

import React from 'react';
import {createContext, useState} from 'react';

const LogContext = createContext();

export function LogContextProvider({children}) {
  const [text, setText] = useState('');
  return (
    <LogContext.Provider value={{text, setText}}>
      {children}
    </LogContext.Provider>
  );
}

export default LogContext;

 

 

 

 

 

---

 

 

 

 

 

children Props

아래처럼 child Props 를 사용하면 특정 매개변수를 함수 그 자체로 가져와서 적용이 가능하다.

함수형태로 매개변수를 받아오는 걸 Render Props라고 한다.

 

function FeedsScreen() {
  return (
    <View style={styles.block}>
      <Box>
        <Text>1</Text>
      </Box>
      <Box>
        <Text>2</Text>
      </Box>
      <Box>
        <Text>3</Text>
      </Box>
    </View>
  );
}

function Box({children}) {
  return <View style={styles.box}>{children}</View>;
}
  const styles = StyleSheet.create({
    box: {
    borderWidth: 2,
    padding: 16,
    borderBottomColor: 'black',
    marginBottom: 16,
  },
});

 

 

 

 

 

---

 

 

 

 

 

 

position: 'absolute' 스타일을 부여

=> 컴포넌트의 위치를 좌푯값 left, right, top, bottom으로 지정 가능

 

justifyContent: 'space-between' 스타일이 적용

=> 해당 컴포넌트 내부에 렌더링된 요소들 사이 여백이 균일하게 분배되어 꽉 채워짐

 

 

 

 

 

Props의 이름만 쓰고 따로 값을 지정하지 않으면 값이 true로 지정

 

multiline이 true면 여러줄 작성 가능

 

 

 

 

 

useRef는 컴포넌트의 함수에서 컴포넌트의 레퍼런스를 선택할 수 있게 하는 Hook

useRef로 선택한 레퍼런스는 아래처럼 .current 값을 조회해 확인 가능

 

        onSubmitEditing={() => {
          bodyRef.current.focus()
        }}

 

 

 

TextInput의 레퍼런스 메소드 종류

• .focus(): TextInput에 포커스를 잡아줍니다.
• .blur(): TextInput에 포커스를 해제합니다.
• .clear(): TextInput의 내용을 모두 비웁니다.

 

 

 

KeyboardAvoidingView로 내용을 감싸줘야 작성한 내용이 엄청 길어져 줄이 많아졌을 때도 문제없이 글을 작성할 수 있다.

안그러면 기본적으로 보여줄 수 있는 줄 수를 초과할 경우,

안드로이드에서는 별 문제없이 스크롤할 수 있지만 iOS에서는 하단 내용이 잘리게 됨

 

 

 

 

 

---

 

 

 

 

 

uuid 라이브러리

=> 고유한 값을 생성해주는 라이브러리 

UUID는 범용 고유 식별자(universally uniqute identifier)로서, 표준으로 사용되는 고유 식별자 형식

5가지 버전이 있는데, 일반적으로 랜덤하고 고유한 식별자를 생성할 때는 v4를 많이 사용

 

 

 

uuid  설치

yarn add uuid

 

react-native-get-random-values라는 라이브러리를 설치

$ yarn add react-native-get-random-values
$ npx pod-install

 

최상위 디렉터리에 있는 index.js 파일에 추가

import 'react-native-get-random-values';

 

 

 

라이브러리의 사용법

import {v4 as uuidv4} from 'uuid';
uuidv4(); // '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

 

 

 

 

 

---

 

 

 

 

 

JSON.stringify()를 사용할 때 두 번째와 세 번째 파라미터를 이와 같이 설정해주면

객체나 배열을 출력할 때 공백과 새 줄을 포함해 보기 좋게 출력

 console.log(JSON.stringify(logs, null, 2));

 

 

 

 

 

---

 

 

 

 

 

date-fns 라이브러리는 날짜/시간에 관련한, 다양한 기능을 제공

설치는 아래와 같다

yarn add date-fns

 

 

 

라이브러리에서 사용할 함수 종류

• formatDistanceToNow: 현재 시각을 기준으로 단어를 사용해 시간을 나타냅니다. (예: 5분 전)
• format: 다양한 형태로 날짜를 포맷팅합니다.

 

 

 

 

 

formatDistanceToNow에서

addSuffix는 포맷팅된 문자열 뒤에 ‘전’ 또는 ‘후’ 접미사를 붙이는 옵션

locale은 언어

언어는 date-fns/locale에서 불러올 수 있음

아래는 한국어로 설정한 상태

format 함수에서 PPP는 날짜, EEE는 요일, p는 시간

  if (diff < 60 * 1) {
    return '방금 전';
  }
  if (diff < 60 * 60 * 24 * 3) {
    return formatDistanceToNow(d, {addSuffix: true, locale: ko});
  }
  return format(d, 'PPP EEE p', {locale: ko});

 

 

 

 

 

---

 

 

 

 

 

애니메이션을 구현할 때는 Animated라는 객체를 사용

사용은 아래와 같다

import React, {useRef} from 'react';
import {Animated} from 'react-native'

function Sample() {
  const animation = useRef(new Animated.Value(1)).current;
}

<Animated.View style={{opacity: animation}}></Animated.View>

 

 

 

위의 애니메이션의 값 설정은 아래처럼 timing을 사용해서 적용 한다.

useNativeDriver는 transform, opacity처럼 레이아웃과 관련없는 스타일에만 적용 가능.
레이아웃에 영향을 끼치는 left, width, paddingLeft, marginLeft와 같은 스타일에는 꼭 useNativeDriver를 false로 지정.

애니메이션은 .start()로 시작하고, 이 함수에 콜백 함수를 인자로 넣어주면 애니메이션이 끝난 후 호출

 

Animated.timing(animation, {
  toValue: 0, // 어떤 값으로 변경할지 - 필수
  duration: 1000, // 애니메이션에 걸리는 시간(밀리세컨드) - 기본값: 500
  delay: 0, // 딜레이 이후 애니메이션 시작 - 기본값: 0
  useNativeDriver: true, // 네이티브 드라이버 사용 여부 - 필수
  isInteraction: true, // 사용자 인터랙션에 의해 시작한 애니메이션인지 지정 - 기본값: true
  // 애니메이션 속도 변경 함수 - 기본값: Easing.inOut(Easing.ease)
  easing: Easing.inOut(Easing.ease), 
}).start(() => {
  // 애니메이션 처리 완료 후 실행할 작업
})

      <Button
        title="FadeOut"
        onPress={() => {
          Animated.timing(animation, {
            toValue: 0,
            useNativeDriver: true,
          }).start();
        }}
      />

 

 

 

 

 

 

좌우로 움직이는 효과

transform 스타일을 사용

 

 

 

우측으로 100, 아래로 50 

{
  transform: [{translateX: 100}, {translateY: 50}]
}

 

 

 

 

 

서서히 사라지는 효과

interpolate 함수 사용

아래의 경우, value 가 0일 때 0, 1일 때 150 으로 출력

animation.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 150],
})

 

 

 

 

 

컴포넌트의 바닥에 가까워졌는지 감지하는 함수

onEndReached 함수와 onEndReachedThreshold 값을 설정

스크롤로 더 많은 정보를 불러오는 무한스크롤링을 구현할 때 이 Props를 사용하면 유용

이 방식은 멀어졌을 때를 구분하지 못함.

아래는 FlatlLst의 바닥을 감지하는 예

콘텐츠의 85%까지 스크롤했을 때 onEndReached 함수가 호출

<FlatList
  (...)
  onEndReached={(distanceFormEnd) => {
    console.log('바닥과 가까워졌어요!');
  }}
  onEndReachedThreshold={0.85}
>

 

 

 

 

 

onScroll 이벤트를 사용하면

콘텐츠의 전체 크기와 스크롤의 위치를 알 수 있다.

아래의 예를 보자

{
  "contentSize": {
    "height": 1273.90478515625,
    "width": 411.4285583496094
  },
  "layoutMeasurement": {
    "height": 554.2857055664062,
    "width": 411.4285583496094
  },
  "contentOffset": {
    "y": 719.6190185546875,
    "x": 0
  }
}

 

contentSize.height : FlatList 내부의 전체 크기

layoutMeasurement.height : 화면에 나타난 FlatList의 실제 크기

contentOffset.y : 스크롤할 때마다 늘어나는 값

스크롤이 맨 위에 있을 때는 0, 스크롤이 맨 아래에 있을 때는 contentSize.height - layoutMeasurement.height를 계산한 값

 

 

 

 

 

spring 함수

움직일 때 좀 통통 튀는 느낌을 준다.

옵션은 아래와 같다

• tension: 강도(기본값: 40)
• friction: 감속(기본값: 7)
• speed: 속도(기본값: 12)
• bounciness: 탄력성(기본값: 8)