💻[React Native] Navigation, Axios+useFocusEffect

📌 Navigation

✔️ 설치

ReactNavigation 홈페이지
필요한 Package 설치 후 (안드로이드는 MainActivity에서

@Override
protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(null);
}

또한 복사 붙여넣기 해주어야 한다.

✔️ 활용

네비게이션 경로 스크린: BoxOffice page-> 하나의 영화 클릭 -> MovieDetail page -> 감독 또는 배우 클릭 -> 감독, 배우의 디테일한 page

DefaultStackNavigator.js

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import BoxOffice from '../screens/BoxOffice';
import MovieDetail from '../screens/MovieDetail';
import SearchResult from '../screens/SearchResult';

const Stack = createNativeStackNavigator();

export default function DefaultStackNavigator() {
  retrun(
    <>
      <Stack.Navigator>
        <Stack.Screen name={'BoxOffice'} component={BoxOffice} />
        <Stack.Screen name={'MovieDetail'} component={MovieDetail} />
        <Stack.Screen name={'SearchResult'} component={SearchResult} />
      </Stack.Navigator>
    </>,
  );
}

각 screen에 대한 StackNavigator를 설정하고, 이를 component로 묶음
이후 묶은 RootController state를 App.js에 추가

export default function RootController() {
  return (
    <NavigationContainer>
      <DefaultStackNavigator />
    </NavigationContainer>
  );
}

✔️각 스크린 별 활용

BoxOffice.js

import React, {useEffect} from 'react';
import BoxOfficeItem from '../components/BoxOfficeItem';
import axios from 'a xios';

export default function BoxOffice({navigation}) {
  const [ranks, setRanks] = useState((initialState = []));
  useEffect(
    (effect = () => {
      const url =
        'https://www.kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json';
      axios.get(
        url,
        (config = {
          params: {
            key: 'bb4881b8d562d9187648f76284e6f14c',
            targetDt: '20220222',
          },
        }).then(res => {
          setRanks(res.data?.boxOfficeResult?.dailyBoxOfficeList || []);
        }),
      );
    }),
    (deps = []),
  );
  return (
    <>
      {ranks.map(item => (
        <BoxOfficeItem navigation={navigation} key={item.rnum} data={item} />
      ))}
    </>
  );
}

BoxOfficeItem.js

import {useNavigation} from '@react-navigation/native';
import React, {useCallback} from 'react';
import {Pressable} from 'react-native';
import Paragraph from './ui/Paragraph';
import styled from 'styled-components';

const Container = styled.View`
  padding: 11px;
`;

export default function BoxOfficeItem({data}) {
  const navigation = useNavigation();
  let intenIcon = '⏺';
  const parsedRankInten = parseInt(data.rankInten, {radix: 10});
  if (parsedRankInten < 0) {
    intenIcon = '🔽';
  } else if (parsedRankInten > 0) {
    intenIcon = '🔼';
  }

  const navigateMovieDetail = useCallback(
    ((callback = () => {
      navigation.navigate('MovieDetail', {movieCd: data.movieCd});
    }),
    (deps = [navigation, data])),
  );

  return (
    <Pressable onPress={navigateMovieDetail}>
      <Container>
        <Row>
          <Paragraph>
            <Paragraph>{data.rank}</Paragraph>
            <Paragraph>
              {intenIcon} {data.rankInten}
            </Paragraph>
            <Paragraph>{data.movieNm}</Paragraph>
            <Paragraph>{data.rankOldAndNew === 'NEW' ? '🆕' : ''}</Paragraph>
          </Paragraph>
        </Row>
      </Container>
    </Pressable>
  );
}

각 아이템에 해당하는 BoxOfficeItem.js에서 MovieDetail페이지로 넘어갈 수 있도록

  const navigateMovieDetail = useCallback(
    ((callback = () => {
      navigation.navigate('MovieDetail', {movieCd: data.movieCd});
    }),
    (deps = [navigation, data])),
  );

<Pressable onPress={navigateMovieDetail}> 처리,
navigation Hook 만들어 처리

MovieDetail.js

import {useFocusEffect, useRoute} from '@react-navigation/native';
import React, {useCallback, useEffect, useState} from 'react';
import {ActivityIndicator, Pressable} from 'react-native';
import Row from '../components/Row';
import Paragraph from '../components/ui/Paragraph';
import axios from 'axios';

export default function MovieDetail({route, navigation}) {
  const [detail, setDetail] = useState((initialState = null));
  useFocusEffect(
    useCallback(
      (callback = () => {
        const url =
          'https://www.kobis.or.kr/kobisopenapi/webservice/rest/movie/searchMovieInfo.json';
        axios.get(
          url,
          (config = {
            params: {
              key: 'bb4881b8d562d9187648f76284e6f14c',
              movieCd: route.params.movieCd,
            },
          })
            .then(res => setDetail(res.data.movieInfoResult.movieInfo))
            .catch(console.warn),
        );
      }),
      (deps = []),
    ),
  );
  if (!detail) return <ActivityIndicator />; //로딩이 돌아가는 표시
  return (
    <>
      <Row>
        <Paragraph>영화명 : {detail.movieNm} </Paragraph>
      </Row>

      <Row>
        <Paragraph>상영시간 : {detail.showTm}분 </Paragraph>
      </Row>
      <Row>
        <Paragraph>개봉일 : {detail.openDt} </Paragraph>
      </Row>
      <Row>
        <Paragraph>
          감독:
          {detail.directors.map(director => (
            <Link
              key={director.peopleNm}
              onPress={() => {
                navigation.navigate('SearchResult', {
                  peopleNm: director.peopleNm,
                });
              }}>
              {director.peopleNm}
            </Link>
          ))}
        </Paragraph>
      </Row>
      <Row>
        <Paragraph>
          출연:
          {detail.actors.map(actor => (
             <Link
              key={actor.peopleNm}
              onPress={() => {
                navigation.navigate('SearchResult', {
                  peopleNm: actor.peopleNm});
              }}>
              {actor.peopleNm}
            </Link>
          ))}
        </Paragraph>
      </Row>
    </>
  );
}

SearchResult.js

import React, {useCallback} from 'react';
import {useFocusEffect} from '@react-navigation/native';
import axios from 'axios';
import {FlatList, Pressable} from 'react-native';
import Paragraph from '../components/ui/Paragraph';

export default function SearchResult() {
  const [list, setList] = useState((initialState = []));
  useFocusEffect(
    useCallback(
      (callback = () => {
        const url =
          'https://www.kobis.or.kr/kobisopenapi/webservice/rest/people/searchPeopleList.json';
        axios.get(
          url,
          (config = {
            params: {
              key: 'bb4881b8d562d9187648f76284e6f14c',
              peopleNm: route.params.peopleNm,
            },
          })
            .then(res => setList(res.data.peopleListResultpeopleList))
            .catch(console.warn),
        );
      }),
      (deps = []),
    ),
  );
  return (
    <FlatList
      data={list}
      keyExtractor={item => item.peopleCd}
      renderItem={data => (
        <Pressable onPress={() => {}}>
          <Paragraph>
            {data.item.peopleNm}
            <Text>({data.item.filmoNames})</Text>
          </Paragraph>
        </Pressable>
      )}></FlatList>
  );
}

배우, 감독의 이름을 클릭하면 해당 페이지로 넘어가야 하므로, MovieDetail.js에서

onPress={() => {
                navigation.navigate('SearchResult', {
                  peopleNm: director.peopleNm,
                });

으로 처리

✔️ 결론

StackNavigator로 설정(다른 navigation은 상단 링크 확인)
navigation.navigate('페이지이름', {넘겨줄 params})로 설정
또는
navigation Hook으로 처리

Stack.Screen에서 options={{headerShown: false}로 stack의 header를 없애고 ui를 꾸밀 수 있음

📌 Axios+useFocusEffect

앱에서 각 screens는 전의 화면에 덮어쓰여지는 것이므로, useEffect로는 상태관리가 어려울 수 있음 따라서 각 스크린을 바라보는 시점으로 설정: useFocusEffect
axios 통신은 get-> 정보를 받을 때 해당하는 링크(url, https로 처리), config에서 각 parms를 요구사항대로 설정하여 정보를 받음