리액트 네이티브 - 4

박찬영·2024년 4월 9일
react native
post-thumbnail

refetch, isRefetching

react-query 를 사용할때 대부분 비구조화 할당으로 data , isPending 을 꺼내는 경우가 대부분입니다. 하지만 refetch , isRefetching 도 유용하게 사용합니다.
Refetch 는 해당 쿼리를 수동으로 리패치 하려고 할때 쓸 수 있는 함수입니다.
isRefetching 는 해당 쿼리를 리패치 할때 true 로 변했다가 쿼리가 리패치가 끝난 후 다시 false 로 바꾸어 줍니다.

const {refetch, isRefetching} = useQuery({
  queryKey: ["movies"],
  queryFn: getData
})

const addEvnet = () => {
  refetch()
}

return isRefetching ? <loading/> : ... 보여줄 component

useQueryClient

const queryClient = useQueryClient()

const {refetch, isRefetching} = useQuery({
  queryKey: ["movies", "ani"],   <-- movies 이름은 같습니다.
  queryFn: getData
})

const {refetch, isRefetching} = useQuery({
  queryKey: ["movies", "dacu"],  <-- movies 이름은 같습니다.
  queryFn: getData
})

const clickBtn = async () => {
  await queryClient.refetchQueries([“movies”])
}

Const queryClient = useQueryClient() 로 꺼낸 뒤
await queryClient.refetchQueries([“movies”])
이렇게 사용하면 queryKey 가 “moives” 인 쿼리를 전부 리패치 해줍니다.

styled-component - FlatList

styled-component 에서 FlatList 를 사용하다 보면 TS 오류가 생깁니다.
왜 이런 일이 생기는 걸까요??
왜냐하면 react native 의 FlatList 가 아닌 styled components 자체에서 가지고 있는 FlatList 를 사용하기 때문에 React native 에서 쓰는 FlatList 라고 알려 주어야 하기 때문입니다.
이처럼 FlatList 를 styled-component 랑 같이 쓸때 타입을 강제로 지정해 주어야 타입 오류가 생기지 않습니다.

const Container = styled.FlatList`
  background-color: ${props => props.theme.mainBgColor};
`as unknown as typeof FlatList; <-- 이게 제일 중요합니다.

react-query key 사용법

React-query 를 사용할 때 만약 get 으로 데이터를 가져올 때 input 이 다 끝나고 해당 input 데이터 값을 토대로 서버에서 데이터를 가져오고 싶을 때 사용하는 방법입니다.

const [query, setQuery] = useState(""); 

const search = async ({queryKey}) => {
  const [, query] = queryKey;
  const response = await axios.get(`https://api.themoviedb.org/3/search/movie?include_adult=true&page=1&query=${query}`, options)
  return response.data.results
}

  const { isPending: moviesPending, data: moviesData, refetch: searchMovies} = useQuery({
    queryKey: ["searchMovies", query],
    queryFn: moviesApi.search,
    enabled: false
  })

  const onSubmit = () => {
    if(query === "") return;
    searchMovies();
  }

     <TextInput
        placeholder='Search for Movie or TV Show' 
        placeholderTextColor="grey"
        returnKeyType='search'
        onChangeText={onChangeText}
        onSubmitEditing={onSubmit}
      />

TouchableOpacity와 TouchableWithoutFeedback

TouchableOpacity와 TouchableWithoutFeedback은 모두 React Native에서 제공하는 터치 가능한 컴포넌트입니다.
사용자의 터치 동작에 반응하여 특정 액션을 실행할 수 있게 해줍니다.
그러나 이 두 컴포넌트는 몇 가지 중요한 차이점이 있습니다.

TouchableOpacity

TouchableOpacity 컴포넌트는 터치가 발생할 때 투명도를 조절하여 터치 피드백을 제공합니다. 사용자가 해당 컴포넌트를 터치할 때, 컴포넌트의 투명도가 조금 어두워지는 등의 피드백이 제공됩니다. 이 효과는 사용자에게 터치가 인식되었음을 시각적으로 알려줍니다.
TouchableOpacity의 특징

  • 터치 피드백을 제공하여 사용자가 터치 이벤트를 인식할 수 있도록 도와줍니다.
  • 터치 시 투명도가 변하는 등의 애니메이션 효과를 적용할 수 있습니다.
  • 버튼과 같은 역할을 하는 경우에 주로 사용됩니다.

TouchableWithoutFeedback

TouchableWithoutFeedback 컴포넌트는 터치가 발생할 때 어떠한 시각적 피드백도 제공하지 않습니다.
사용자가 해당 컴포넌트를 터치해도, 컴포넌트 스타일이 변경되지 않습니다.
그러므로 이 컴포넌트를 사용할 때에는 명시적인 시각적 피드백이 필요한 경우에는 개발자가 직접 구현해주어야 합니다.
TouchableWithoutFeedback의 특징

  • 어떠한 시각적 피드백도 제공하지 않으므로, 터치 동작이 발생할 때 스타일이 변경되지 않습니다.
  • 주로 터치 이벤트에 반응하여 추가적인 액션을 실행하고자 할 때 사용됩니다.
  • 커스텀 UI 요소나 복잡한 터치 처리 로직이 필요한 경우에 유용합니다.

차이점

주요한 차이점은 다음과 같습니다:

  • 피드백 제공 여부
    TouchableOpacity는 터치 피드백을 제공하지만, TouchableWithoutFeedback은 어떠한 피드백도 제공하지 않습니다.
  • 스타일 변경
    TouchableOpacity는 터치 시 스타일이 변경되지만, TouchableWithoutFeedback은 스타일이 변경되지 않습니다.
  • 사용 목적
    TouchableOpacity는 주로 버튼과 같은 역할을 하는 경우에 사용되고, TouchableWithoutFeedback은 터치 이벤트에 반응하여 추가적인 로직을 실행해야 할 때 사용됩니다.
    따라서 개발하고자 하는 UI 요소에 맞게 적절한 컴포넌트를 선택하여 사용해야 합니다.

StyleSheet.absoluteFill

react-native 에서 제공해주는 기능으로 대부분 style 안에 정의해 줍니다.

<View style ={ StyleSheet.absoluteFill }>hello</View>

부모 컴포넌트의 크기와 위치를 모두 채우는 절대적으로 위치 지정된 요소를 생성합니다. 이것은 주로 모달 창이나 전체 화면 배경과 같이 부모 요소를 꽉 채우는 컴포넌트를 만들 때 유용하게 사용됩니다

  • position: 'absolute': 절대 위치 지정을 통해 컴포넌트를 렌더링합니다.
  • top: 0: 컴포넌트를 부모 요소의 위쪽 가장자리에 배치합니다.
  • left: 0: 컴포넌트를 부모 요소의 왼쪽 가장자리에 배치합니다.

In 키워드


const params = {
  original_title: "Hello World",
  author: "John Doe"
};

if ("original_title" in params) {
  console.log("The 'original_title' key exists in the params object.");
} else {
  console.log("The 'original_title' key does not exist in the params object.");
}

Linear-gradient

"Linear-gradient"은 웹 개발에서 많이 사용되는 CSS 속성 중 하나로, 요소의 배경을 선형 그라데이션(색상이 서서히 변하는 효과)으로 채우는 데 사용됩니다.
그러나 브라우저 환경에서는 브라우저가 해당 CSS 속성을 지원하므로 별도의 설치가 필요하지 않습니다.
하지만, 브라우저 이외의 환경에서, 예를 들어 Node.js나 React Native와 같은 환경에서는 브라우저와 달리 특정 CSS 속성이나 기능을 직접 지원하지 않을 수 있습니다.
이 경우에는 해당 기능을 구현하기 위해 추가적인 라이브러리를 설치하거나 커스텀한 솔루션을 구현해야 할 수 있습니다.

expo install expo-linear-gradient
npx pod-install ios

두개의 데이터 가져오는 부분

  const {isPending: moviesPending, data: moviesData} = useQuery({
    queryKey: ["movies", params.id],
    queryFn: moviesApi.detail,
    enabled: "original_title" in params
  })
  
  const {isPending: tvPending, data: tvData} = useQuery({
    queryKey: ["tv", params.id],
    queryFn: tvApi.tvDetail,
    enabled: "original_name" in params
  })

이렇게 하면 상황에 따라 어떤 데이터를 가져올 지 정해줄 수 있습니다.

또한 밑에처럼 생략할 수 있습니다.

  const isMovie = "original_title" in params;

  const {isPending, data} = useQuery({
    queryKey: [isMovie ? "movies" : "tv", params.id],
    queryFn: isMovie ? moviesApi.detail : tvApi.tvDetail,
    enabled: "original_title" in params
  })

Linking API

링크를 열 수 있도록 허가해주는 라이브러리 입니다.
때때로 링크는 또 다른 앱이나 브라우저로 연결되기도 하는데 이를 도와준다고 생각하면 됩니다.

React Native의 Linking 모듈은 다음과 같은 기능을 제공

URL 열기: Linking을 사용하여 외부 URL을 열 수 있습니다.
전화 걸기: 전화번호를 입력하여 전화를 걸 수 있습니다.
문자 메시지 보내기: 특정 전화번호로 문자 메시지를 보낼 수 있습니다.
이메일 보내기: 이메일 주소를 사용하여 이메일을 보낼 수 있습니다.
딥 링크 처리: 앱 내에서 특정 화면으로 이동하는 등의 딥 링크를 처리할 수 있습니다.
링크 이벤트 처리: 앱이 백그라운드에서 실행 중일 때 외부 링크를 클릭하면 해당 앱으로 이동하는 등의 이벤트를 처리할 수 있습니다.

import { Linking } from 'react-native'

  const openYTLink = async (videoID: string) => {
    const baseUrl = `http://m.youtube.com/watch?v=${videoID}`;
    await Linking.openURL(baseUrl)
  }

Expo web browser

어플을 나가서 이동하는 것이 아닌 해당 어플에서 이동하게 만들고 싶을때 이용하면 된다.

Expo install expo-web-browser
npx pod-install ios
import * as WebBrowser from "expo-web-browser";


  const openYTLink = async (videoID: string) => {
    const baseUrl = `http://m.youtube.com/watch?v=${videoID}`;
    await WebBrowser.openBrowserAsync(baseUrl);
  }

navigate 로 params 보내기

navigation.navigate()

navigation.navigate("stack", {
screen: "Detail",
params: { "my name" }
})

//Detai.js
const Detail = ({navigation, route: {params: {originalTitle}})

이런식으로 보낸 다음 Detail page 에서 props 를 검색하면 route 객체 안에
params 객체로 "my name" 을 사용할 수 있습니다. 이 외에도 props 에 많은 정보가 들어 있습니다.

setOptions

navigation 으로 이동한 component props 안에 setOptions 라는 기능이 있습니다.
헤더의 제목을 변경하거나 헤더 버튼을 추가하거나 수정하는 데 사용할 수 있습니다.

이걸 사용해서 

const Detail = ({
  navigation: { setOptions },
  route: {
    params: { originalTitle }
  }
}) => {
  useEffect(() => {
    setOptions({
      title: originalTitle
    })
  }, [ ])
}

ts 로 navigate params 설정해주기

type RootStackParamList = {
  Detail: {  originalTitle: string } ; 
} 

type DetailScreenProps = NativeStackScreenProps<RootStackParamList, "Detail">

const Detail: React.FC<DetailScreenProps> = ({ navigation: { setOptions }, route: { params: { originalTitle }} }) => {...

이 과정은 props 에 ts 를 적용하고 싶을때 사용하는 과정입니다.

Share

React Native에서 콘텐츠를 다른 앱과 공유하는 기능을 구현하려면 Share 컴포넌트를 사용할 수 있습니다. 이 컴포넌트는 사용자가 콘텐츠를 다른 앱으로 전송할 수 있는 인터페이스를 제공합니다.

const shareBtn = async () => {
  await Share.share({
    url: 'http://local...',
    title: 'MOVIE'
  })
}

<TouchableOpacity onPress={shareBtn}>공유하기</TouchableOpacity>
profile
박찬영
오류는 도전, 코드는 예술
이전 포스트

리액트 네이티브 - 3

다음 포스트

리액트 네이티브 - 5

0개의 댓글