React Native에서 하위 컴포넌트까지 새로고침하기Refresh all data in sub-components in React Native
📅
🚀
들어가기 전에🔗
이 포스트는 Expo 환경에서 작성되어 있지만 모든 React Native 환경에서 적용되는 내용입니다. 또한, 기본적인 셋팅이 되어있는 프로젝트를 기준으로 작성되었습니다.
React Native에서 화면 새로고침하기 1↗ 포스트에서 새로고침 기능을 구현하는 방법을 알아보았습니다. 이번 포스트에서는 하위 컴포넌트의 데이터까지 모두 새로고침하는 방법을 알아보겠습니다.
🚀
1. React, React Native 환경에서 Key의 역할🔗
이번 포스팅에 앞서 한 가지 중요한 개념을 알아야 합니다. 바로
Key
입니다. Key는 React에서 컴포넌트를 구분하는 고유한 값입니다. 컴포넌트를 재렌더링 할 때 컴포넌트를 식별하기 위해 사용됩니다.
주로 사용되는 곳은 배열의 요소를 렌더링 할 때입니다.const items = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
];
return (
<div>
{items.map((item) => (
<div key={item.id}>{item.name}</div>
))}
</div>
);key를 사용하지 않으면 다음과 같은 경고가 발생합니다.
Warning: Each child in a list should have a unique "key" prop.
나중에 이 Key에 대해 자세히 알아보는 포스팅을 작성하겠습니다. 이번 포스팅에서는 Key가 가지는 역할 중 하나인 컴포넌트를
재렌더링
할 때 컴포넌트를 식별
하기 위해 사용된다는 것만을 기억하고 넘어가겠습니다.🚀
2. 원하는 컴포넌트만 재렌더링하기🔗
우리는 이 Key의 개념을 이용하여 원하는 컴포넌트만 재렌더링할 수 있습니다. 다음 예시는 하위의 두 동일한 컴포넌트의 데이터를 새로고침하는 예시입니다. 둘 모두 useState를 사용하여 초기 랜더링 될 때 현재 시간을 출력하는 컴포넌트입니다.
import React, { useState } from 'react';
import { Text, ScrollView, RefreshControl, View } from 'react-native';
const Card = () => {
const [now] = useState(new Date().toLocaleString());
return (
<View style={{ flex: 1 }}>
{Array.from({ length: 100 }).map((_, index) => (
<Text key={index} style={{ textAlign: 'center', justifyContent: 'center', fontSize: 16 }}>{`${now}`}</Text>
))}
</View>
);
};
const List = () => {
const [key, setKey] = useState(new Date().getTime());
const [refreshing, setRefreshing] = useState(false);
const handleRefresh = () => {
setRefreshing(true);
setTimeout(() => {
setKey(new Date().getTime());
setRefreshing(false);
}, 1000);
};
return (
<ScrollView
style={{ flex: 1, backgroundColor: 'white', padding: 20 }}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} colors={['blue', 'red', 'green']} />
}
>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Card key={key} /> {/* 키 값을 새로 설정 */}
<Card />
</View>
</ScrollView>
);
};
export default List;실행 결과를 보면 좌측에 있는 컴포넌트만 시간 데이터가 새로고침이 되는 것을 확인할 수 있습니다.
초를 유심히 보세요
🚀
3. 컴포넌트 자체를 새로 렌더링 하기🔗
이번에는 컴포넌트 자체를 새로 렌더링 하는 방법을 알아보겠습니다. 다음 예시는 컴포넌트 자체를 새로 렌더링 하는 예시입니다. 단순히 기존 코드에서 최상위 컴포넌트에서 키를 새로 설정하여 컴포넌트를 재렌더링 하는 방법을 사용합니다. 한줄만 추가하면 됩니다.
import React, { useState } from 'react';
import { Text, ScrollView, RefreshControl, View } from 'react-native';
const Card = () => {
const [now] = useState(new Date().toLocaleString());
return (
<View style={{ flex: 1 }}>
{Array.from({ length: 100 }).map((_, index) => (
<Text key={index} style={{ textAlign: 'center', justifyContent: 'center', fontSize: 16 }}>{`${now}`}</Text>
))}
</View>
);
};
const List = () => {
const [key, setKey] = useState(new Date().getTime());
const [refreshing, setRefreshing] = useState(false);
const handleRefresh = () => {
setRefreshing(true);
setTimeout(() => {
setKey(new Date().getTime());
setRefreshing(false);
}, 1000);
};
return (
<ScrollView
key={key} // 키 값을 새로 설정
style={{ flex: 1, backgroundColor: 'white', padding: 20 }}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={handleRefresh} colors={['blue', 'red', 'green']} />
}
>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Card key={key} />
<Card />
</View>
</ScrollView>
);
};
export default List;실행 결과를 보면 하위 컴포넌트의 키와는 상관없이 모든 컴포넌트를 새로 렌더링 하는 것을 확인할 수 있습니다.
초를 유심히 보세요
🚀
결론🔗
이번 포스트에서는 React Native에서 하위 컴포넌트까지 모두 새로고침하는 방법을 알아보았습니다. 이 방법을 이용하면 원하는 컴포넌트만 재렌더링 할 수 있습니다. 더 다양한 방식을 사용해 유동적으로 데이터를 새로고침 할 수 있을 것입니다.
✅
더 생각해 보기🔗
- key를 index로 설정하면 안되는 이유
- 컴포넌트 자체를 새로 렌더링 하는 방법의 장단점
✅