컨테이너 및 프리젠테이션 구성 요소로 더 나은 React Native 앱 구축
React 또는 React Native 개발자로서 컨테이너 및 프레젠테이션 구성 요소의 개념을 이해하는 것이 중요합니다.
이러한 디자인 패턴은 문제를 적절하게 분리하는 데 도움이 됩니다. 이 개념을 사용하여 보다 유지 관리 및 확장 가능한 방식으로 코드를 구성할 수 있습니다.
컨테이너 구성요소란?
스마트 구성 요소라고도 하는 컨테이너 구성 요소는 앱의 데이터 및 논리 관리를 담당합니다. API에서 데이터 가져오기, 상태 업데이트, 사용자 상호 작용 처리와 같은 작업을 처리합니다.
이 구조를 구현하려면 React-Redux와 같은 라이브러리를 사용하여 구성 요소를 저장소에 연결하고 데이터 및 작업을 하위 구성 요소 또는 프레젠테이션 구성 요소로 전달할 수 있습니다.
프레젠테이션 구성 요소는 무엇입니까?
프레젠테이션 구성 요소는 상위 구성 요소의 데이터 표시를 담당합니다. 그들은 종종 상태 비저장이며 UI 및 데이터의 시각적 표현에 중점을 둡니다.
이 상태는 조작 및 테스트를 쉽게 만들어 바보 구성 요소라는 이름을 얻습니다. 프리젠테이션 구성 요소의 멍청한 상태는 전체 응용 프로그램에서 재사용할 수 있도록 합니다. 이렇게 하면 형편없고 반복적인 코드를 피할 수 있습니다.
컨테이너 및 프레젠테이션 구성 요소를 사용하는 이유는 무엇입니까?
질문에 대한 짧고 간단한 대답은 관심의 분리입니다. 이것은 객체 지향, 기능 및 측면 지향 프로그래밍을 포함한 여러 패러다임의 핵심 원칙입니다. 그러나 많은 React 개발자는 이러한 개념을 무시하고 제대로 작동하는 코드를 작성하는 경향이 있습니다.
제대로 작동하는 코드는 작동을 멈출 때까지 훌륭합니다. 잘못 구성된 코드는 유지 관리 및 업데이트가 더 어렵습니다. 이로 인해 새로운 기능을 추가하거나 다른 프로그래머를 프로젝트에 참여시키는 것이 까다로울 수 있습니다. 이미 생성된 이러한 문제를 수정하는 것은 작업 부하이며 발병을 방지하는 것이 좋습니다.
컨테이너 및 프리젠테이션 구성 요소 디자인 패턴을 적용하면 프로젝트 내의 모든 구성 요소가 처리하는 명확한 작업을 갖게 됩니다. 이렇게 하면 최적화된 각 구성 요소가 함께 모여 앱을 완성하는 모듈식 구조를 얻을 수 있습니다.
구성 요소는 여전히 겹칠 수 있습니다. 컨테이너와 프리젠테이션 구성 요소 사이의 의무 구분이 항상 구별되는 것은 아닙니다. 그러나 일반적으로 프레젠테이션 구성 요소는 시각적 데이터에, 컨테이너 구성 요소는 데이터 및 논리에 집중해야 합니다.
React Native에서 컨테이너 및 프레젠테이션 구성 요소를 사용하는 방법
일반적인 React Native 앱에서는 표현 및 논리 관련 코드를 모두 포함하는 구성 요소를 만드는 것이 일반적입니다. API에서 데이터를 가져오고, 양식의 상태를 관리하고, 출력을 모두 하나의 클래스에 표시할 수 있습니다. API에서 사용자 목록을 가져와 이름과 나이를 표시하는 간단한 앱을 생각해 보세요.
단일 구성 요소로 이 작업을 수행할 수 있지만 읽기 어렵고 재사용할 수 없으며 테스트 및 유지 관리가 더 어려운 코드가 생성됩니다.
예를 들어:
import React, { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
const UserList = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
const response = await fetch('https://example.com/users');
const data = await response.json();
setUsers(data);
};
fetchUsers();
}, []);
return (
<FlatList
data={users}
keyExtractor={item => item.id}
renderItem={({ item }) => (
<View>
<Text>Name: {item.name}</Text>
<Text>Age: {item.age}</Text>
</View>
)}
/>
);
};
export default UserList;
이 예에서 UserList 는 입력 필드의 상태 관리, API에서 데이터 가져오기 및 데이터 렌더링을 담당합니다.
이를 구현하는 더 좋고 효율적인 방법은 UserList의 논리를 프레젠테이션 및 컨테이너 구성 요소로 분리하는 것입니다.
사용자 데이터 가져오기 및 관리를 담당 하는 UserListContainer 구성 요소를 만들 수 있습니다 . 그런 다음 이 데이터를 프레젠테이션 구성 요소인 UserList 에 소품으로 전달할 수 있습니다.
import React, { useState, useEffect } from 'react';
// Container Component
const UserListContainer = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
const fetchUsers = async () => {
const response = await fetch('https://example.com/users');
const data = await response.json();
setUsers(data);
};
fetchUsers();
}, []);
return <UserList users={users} />;
};
export default UserListContainer;
프레젠테이션을 두 개의 프레젠테이션 구성 요소인 User 및 UserList 간에 분리할 수 있습니다 . 각각은 받은 입력 소품을 기반으로 마크업을 생성하는 일을 담당합니다.
import { View, Text, FlatList } from 'react-native';
// Presentational Component
const User = ({ name, age }) => (
<View>
<Text>Name: {name}</Text>
<Text>Age: {age}</Text>
</View>
);
// Presentational Component
const UserList = ({ users }) => (
<FlatList
data={users}
keyExtractor={item => item.id}
renderItem={({ item }) => <User name={item.name} age={item.age} />}
/>
);
새 코드는 원래 구성 요소를 두 개의 표시 구성 요소인 User 및 UserList 와 하나의 컨테이너 구성 요소인 UserListContainer 로 분리 합니다.
컨테이너 및 프레젠테이션 구성 요소 구현을 위한 모범 사례
컨테이너 및 프레젠테이션 구성 요소를 사용할 때 구성 요소가 의도한 대로 작동하도록 몇 가지 모범 사례를 따르는 것이 중요합니다.
- 각 구성 요소에는 명확하고 구체적인 역할이 있어야 합니다. 컨테이너 구성 요소는 상태를 관리해야 하고 프레젠테이션 구성 요소는 시각적 프레젠테이션을 처리해야 합니다.
- 가능한 경우 클래스 구성 요소 대신 기능적 구성 요소를 사용하십시오. 더 간단하고 테스트하기 쉬우며 더 나은 성능을 제공합니다.
- 목적과 관련 없는 구성 요소에 논리 또는 기능을 포함하지 마십시오. 이렇게 하면 구성 요소에 집중하고 유지 관리 및 테스트를 쉽게 할 수 있습니다.
- 구성 요소 간의 통신에 소품을 사용하여 문제를 명확하게 분리하고 밀접하게 결합된 구성 요소를 피하십시오.
- 상태에 대한 불필요한 업데이트는 성능 문제로 이어질 수 있으므로 필요한 경우에만 상태를 업데이트하는 것이 중요합니다.
이러한 모범 사례를 따르면 컨테이너 및 프레젠테이션 구성 요소가 효과적으로 함께 작동하여 React Native 앱에서 상태 및 시각적 프레젠테이션을 관리하기 위한 깨끗하고 체계적이며 확장 가능한 솔루션을 제공할 수 있습니다.
컨테이너 및 프레젠테이션 구성 요소 사용의 이점
컨테이너 및 프레젠테이션 구성 요소는 여러 가지 이점을 제공할 수 있습니다. 코드 구조, 유지 관리 및 확장성을 개선하는 데 도움이 될 수 있습니다. 또한 팀 간의 공동 작업 및 작업 위임이 향상됩니다. React Native 앱의 성능과 최적화를 향상시킬 수도 있습니다.
이러한 구성 요소를 구현하기 위한 모범 사례를 따르면 더 우수하고 확장 가능한 React Native 앱을 빌드할 수 있습니다.
답글 남기기