Front End/React, ReactNative

React ReactNative state에 데이터가 있다면 map() 사용하기, useEffect state 재랜더링, loding 자주 사용되는 로직

LoGinShin 2023. 6. 23. 01:38
반응형

 

배열이나 컴포넌트를 사용하면서 반복되는 return값을 map()이라는 함수를 많이 사용하실 텐데 이때 state나 배열에 데이터가 없다면 에러가 납니다.

 

"데이터가 없는데 어떻게 데이터를 부르겠다는 거냐"

 

그럴 때는 state가 갖는 특성인 리렌더링을 이용하셔서 데이터가 들어왔다면 return값을 바꿔주는 삼학 연산자를 더해주면 됩니다.

 

 randomDiaryData.map((my, index) => {
                 	return (
                    <Card key={index} data={randomDiaryData[index]}></Card>
                  );
                })

직접 만든 카드 컴포넌트에 randomDiaryData라는 배열을 map을 돌려 순서대로 출력하는 코드입니다.

 

 

이때 randomDiaryData에 값이 없다면 map() 함수에서 에러가 납니다.

이럴 때 삼학연산자를 사용해서 randomDiaryData [0] 안에 데이터값이 있다면 출력하는 코드를 사용하면 해결됩니다.

{randomDiaryData[0] &&
                randomDiaryData.map((my, index) => {
                  return (
                    <Card key={index} data={randomDiaryData[index]}></Card>
                  );
                })}

 

이때 많은 어플이나 사이트가 데이터가 불러와지는 동안 사용자는 화면이 멈춘 줄 알면 안 되니 loading state까지 사용해 기다리는 시간을 지루하지 않게 해 주는 겁니다.

{loading && <ActivityIndicator size="large" color="white" />}

loading state를 만들어서 true false로 관리해 줬습니다.

 

 

 

 

순서도

isFocused를 사용해서 처음 화면에 들어오게 되면 최초 한번 실행되는 useEffect를 만들었습니다.

  useEffect(() => {
    console.log("Pie차트 실행");
    getPieData();
    getRandomDate();
  }, [isFocused]);

해당 screen에 들어오면 자연스럽게 실행되겠죠.

여기서 getRandomDate()라는 함수가 실행되는데 서버로부터 데이터를 가지고 오는 함수입니다.

 

 

 

 

 // 랜덤 일기 함수 가지고오기
  const getRandomDate = async () => {
    setLoading(true);
    const userId = await AsyncStorage.getItem("id");
    try {
      await axios(
        {
          method: "post",
          url: `${API.RANDOMDIARY}`,
          // url: 'http://192.168.0.10:3001/pieTop',
          params: {
            id: userId, //****작성자 id
          },
        },
        null
      )
        .then((res) => {
          setRandomDiaryData(res.data);
          // console.log(res.data);
        })
        .catch(function (error) {
          Alert.alert("❗error : bad response");
        });
    } catch (error) {
      console.log(error);
    }
    setLoading(false);
  };

위에 코드에서 보시면 setLoading으로 true로 잡아주고 로딩(버터링) 애니메이션을 켜주고 axios를 통해 요청을 보내 값을 받아옵니다.

이때 값을 받아오는 데 성공한다면 setLoading을 false로 바꿔주면서 꺼줍니다. 그리고 받아온 값은 setRandomDiaryData에 넣어줍니다.

 

그럼 state에서 재랜더링이 일어나면서 버퍼링이 끝나고 카드 컴포넌트에 제대로 데이터 값이 들어가게 됩니다.

 

 

 

 

 

 

{randomDiaryData[0] &&
                randomDiaryData.map((my, index) => {
                  return (
                    <Card key={index} data={randomDiaryData[index]}></Card>
                  );
                })}

위에 코드가 리렌더링 되면서 카드가 보입니다.

 

 

이는 실제로 많은 앱과 웹에 많이 사용되는 로직입니다. 한번 해두면 두고두고 사용하니 한번 구현해 보세요.

생각보다 많은 에러를 잡아줍니다.

 

728x90
반응형