refactor this code : import React, { useEffect, useState, useContext } from "react";
import {
 View,
 Text,
 StyleSheet,
 FlatList,
 TouchableOpacity,
} from "react-native";
import { LoginContext } from "../../LoginContext";
import {
 ActivityIndicator,
 TouchableRipple,
 TextInput,
} from "react-native-paper";
import Icon from "react-native-vector-icons/MaterialCommunityIcons";

const Test = (props) => {
 const relevantInfo = useContext(LoginContext);
 const [isModuleDataLoading, setIsModuleDataLoading] = useState(false);
 const [entityname, setEntityName] = useState("");
 const [searchTerm, setSearchTerm] = useState("");
 const [isOpen, setOpen] = useState(false);
 const [contacts, setContacts] = useState([]);
 const [leads, setLeads] = useState([]);
 const [accounts, setAccounts] = useState([]);
 const entityModule = [
 {
 modulename: "Contacts",
 entity: "firstname,lastname",
 },
 {
 modulename: "Leads",
 entity: "firstname,lastname",
 },
 {
 modulename: "Accounts",
 entity: "accountname",
 },
 {
 modulename: "Products",
 entity: "productname",
 },
 {
 modulename: "Quotes",
 entity: "subject",
 },
 ];

 const renderItem = ({ item, idx }) => {
 var title = "";
 if (entityname.includes(",")) {
 title = entityname
 .split(",")
 .map((entity) => item?.[entity])
 .join(" ");
 } else {
 title = item?.[entityname];
 }

 return (
 {
 console.log({ title: title, id: item.id });
 }}
 style={styles.touchableRipple}
 rippleColor="blue"
 >
 
 {title}
 
 
 );
 };
 const [isFocused, setIsFocused] = useState(true);

 const searchbymodule = async (module) => {
 var rest = entityModule.find((item) => item.modulename == module).entity;
 if (rest.includes(",")) {
 var res = await fetch(
 `${relevantInfo.link}/webservice.php?operation=query&sessionName=${
 relevantInfo.sessionName
 }&query=select ${rest} from ${module} WHERE ${
 rest.split(",")[0]
 } LIKE '%${searchTerm}%' OR ${
 rest.split(",")[1]
 } LIKE '%${searchTerm}%' ORDER BY ${rest} limit 0, 55;`
 );
 } else {
 var res = await fetch(
 `${relevantInfo.link}/webservice.php?operation=query&sessionName=${relevantInfo.sessionName}&query=select ${rest} from ${module} WHERE ${rest} LIKE '%${searchTerm}%' ORDER BY ${rest} limit 0, 55;`
 );
 }

 return res;
 };
 const search = () => {
 searchbymodule("Contacts")
 .then((res) => res.json())
 .then((res) => setContacts(res.result))
 .catch((err) => console.error(err));
 searchbymodule("Accounts")
 .then((res) => res.json())
 .then((res) => setAccounts(res.result))
 .catch((err) => console.error(err));
 searchbymodule("Leads")
 .then((res) => res.json())
 .then((res) => setLeads(res.result))
 .catch((err) => console.error(err));
 };

 return (
 
 
 {
 setSearchTerm(newTerm);
 }}
 onFocus={() => {
 setIsFocused(true);
 }}
 onBlur={() => {
 setIsFocused(false);
 }}
 returnKeyType="search"
 onSubmitEditing={search}
 />
 

 {isModuleDataLoading ? (
 
 ) : (
 
 
 
 {"Contacts"}
 
 
 {contacts?.length} records
 
 setOpen((v) => !v)}>
 {!isOpen ? (
 
 ) : (
 
 )}
 
 
 {isOpen && (
 item.id}
 />
 )}
 
 )}
 {isModuleDataLoading ? (
 
 ) : (
 
 
 
 Accounts
 
 
 {accounts.length} records
 
 setOpen((v) => !v)}>
 {!isOpen ? "open" : "close"}
 
 
 {isOpen && (
 item.id}
 />
 )}
 
 )}
 {isModuleDataLoading ? (
 
 ) : (
 
 
 leads
 {leads.length} records
 setOpen((v) => !v)}>
 {!isOpen ? "open" : "close"}
 
 
 {isOpen && (
 item.id}
 />
 )}
 
 )}
 
 );
};

const styles = StyleSheet.create({
 touchableRipple: {
 marginHorizontal: 10,
 marginVertical: 3,
 minHeight: 50,
 padding: 10,
 flexDirection: "row",
 alignItems: "center",
 borderWidth: 1,
 borderRadius: 5,
 borderColor: "#031321",
 },
 itemContainer: {
 flexDirection: "row",
 alignItems: "center",
 },
 title: {
 fontSize: 16,
 fontWeight: "600",
 color: "#031321",
 width: "100%",
 flex: 1,
 },
 pagination: {
 flexDirection: "row",
 alignItems: "center",
 justifyContent: "center",
 },
 button: {
 position: "absolute",
 margin: 16,
 bottom: 0,
 alignSelf: "center",
 },
});
export default Test;
이 코드를 리팩터링하세요. "react"에서 React, { useEffect, useState, useContext }를 import합니다;import { View, Text, StyleSheet, FlatList, TouchableOpacity,}를 "react-native"에서 가져옵니다;"../../LoginContext"에서 { LoginContext }를 임포트합니다;import { ActivityIndicator, TouchableRipple, TextInput,}를 "react-native-paper"에서 가져옵니다;"react-native-vector-icons/MaterialCommunityIcons"에서 Icon을 가져옵니다;const Test = (props) => { const 관련정보 = 사용컨텍스트(로그인컨텍스트); const [isModuleDataLoading, setIsModuleDataLoading] = useState(false); const [엔티티이름, 세트엔티티이름] = 사용상태(""); const [searchTerm, setSearchTerm] = useState(""); const [isOpen, setOpen] = useState(false); const [연락처, setContacts] = useState([]); const [leads, setLeads] = useState([]); const [accounts, setAccounts] = useState([]); const entityModule = [ { 모듈 이름: "연락처", entity: "이름, 성", }, { 모듈명: "리드", 엔티티 "이름,성", }, { 모듈명: "계정", 엔티티 "계정명", }, { 모듈명: "제품", 엔티티: "제품명", }, { 모듈명: "따옴표", entity: "subject", }, ]; const renderItem = ({ item, idx }) => { var title = ""; if (entityname.includes(",")) { title = 엔티티명 .split(",") .map((엔티티) => item?..[엔티티]) .join(" "); } else { title = item?..[entityname]; } 반환 ( { console.log({ title: title, id: item.id }); }} 스타일.터치가능리플} rippleColor="blue" >  {title}   ); }; const [isFocused, setIsFocused] = useState(true); const searchbymodule = async (module) => { var rest = entityModule.find((item) => item.modulename == module).entity; if (rest.includes(",")) { var res = await fetch( `${relevantInfo.link}/webservice.php?operation=query&sessionName=${ 관련정보.세션Name }&query=select ${module}에서 ${rest} 선택 WHERE ${ rest.split(",")[0] } } LIKE '%${searchTerm}%' OR ${ rest.split(",")[1] } } LIKE '%${searchTerm}%' ORDER BY ${rest} limit 0, 55;` ); } else { var res = await fetch( `${relevantInfo.link}/webservice.php?operation=query&sessionName=${relevantInfo.sessionName}&query=select ${module}에서 ${rest} 선택 WHERE ${rest} LIKE '%${searchTerm}%' ORDER BY ${rest} limit 0, 55;` ); } RETURN RES; }; const search = () => { searchbymodule("연락처") .then((res) => res.json()) .then((res) => setContacts(res.result)) .catch((err) => console.error(err)); searchbymodule("Accounts") .then((res) => res.json()) .then((res) => setAccounts(res.result)) .catch((err) => console.error(err)); searchbymodule("Leads") .then((res) => res.json()) .then((res) => setLeads(res.result)) .catch((err) => console.error(err)); }; return (   { setSearchTerm(newTerm); }} onFocus={() => { setIsFocused(true); }} onBlur={() => { setIsFocused(false); }} returnKeyType="검색" onSubmitEditing={search} />  {isModuleDataLoading ? (  ) : (    {"연락처"}   {연락처?.길이} 레코드  setOpen((v) => !v)}> {!isOpen ? (  ) : (  )}   {isOpen && ( item.id} /> )}  )} {isModuleDataLoading ? (  ) : (    Accounts   {accounts.length} 레코드  setOpen((v) => !v)}> {!isOpen ? "open" : "close"}   {isOpen && ( item.id} /> )}  )} {isModuleDataLoading ? (  ) : (   leads {leads.length} 레코드 setOpen((v) => !v)}> {!isOpen ? "open" : "close"}   {isOpen && ( item.id} /> )}  )}  );};const styles = StyleSheet.create({ touchableRipple: { marginHorizontal: 10, marginVertical: 3, minHeight: 50, padding: 10, flexDirection: "행", alignItems: "가운데", borderWidth: 1, borderRadius: 5, borderColor: "#031321", }, itemContainer: { flexDirection: "행", alignItems: "가운데", }, title: { fontSize: 16, fontWeight: "600", color: "#031321", 너비: "100%", flex: 1, }, 페이지 매김: { flexDirection: "행", alignItems: "가운데", justifyContent: "가운데", }, 버튼: { 위치 "절대", margin: 16, bottom: 0, alignSelf: "center", },});내보내기 기본값 테스트;