로직과 UI를 분리하면 구성 요소를 더 쉽게 작성하고 테스트할 수 있습니다.
이 문서의 주요 목표는 각 구성 요소가 해당 데이터, 오류 처리, 로드 및 기타 필요한 논리에만 관심을 두는 방식으로 새 구성 요소를 작성하고 있는지 확인하는 것입니다. ).
왜 중요한가?
- 확장성: 실제로 확장성이 높습니다.
- 제거 가능성: 오늘 이후에는 구성 요소를 삭제하는 것이 문제가 되지 않아야 하며 주요 변경 사항이나 회귀가 발생하지 않습니다.
- 이동성: 어디에서나 동일한 API를 사용하는 프로젝트 간에 구성 요소를 사용할 수 있는 기능입니다.
실습
코드를 살펴보고 리팩토링 전후의 2가지 예를 살펴보겠습니다.
다음 예를 들어 어떻게 구현하는지 이해해 봅시다.
import React, { useMemo } from 'react';
import useAxios from 'axios-hooks'; const TodoList = () => { const [{ data, loading, error }] = useAxios( `/`); const todoItems = useMemo( () => (data ? data.filter((item) => item.status === 'TODO') : []), [data], ); if (loading) return <div>Loading...</div>; if (error) return <div>Error</div>; return <div>{JSON.stringify(todoItems)}</div>;
}; export default TodoList;
위에서 볼 수 있듯이 axios를 이용한 원격 API 구성을 통해 데이터를 요청하여 To-Do 목록을 구현하는 간단한 예제가 있습니다.
status = TODO인 항목을 추출하는 간단한 계산을 알 수 있습니까? 귀하의 대답이 '예'라면 우리는 같은 페이지에 있습니다.
기사 시작 부분에서 설명했듯이 우리의 임무는 UI에서 로직을 분리하는 것이지만 위의 예에서는 동일한 JS 파일에 로직이 있으므로 임무를 달성하기 위해 수행해야 하는 작업을 살펴보겠습니다.
따라서 먼저 구성 요소에서 논리를 제거해야 합니다.
import { useMemo } from 'react';
import useAxios from 'axios-hooks'; const useTodoList = () => { const [{ data, loading, error }] = useAxios( `/`); const todoItems = useMemo( () => (data ? data.filter((item) => item.status === 'TODO') : []), [data], ); return [{ data, loading, error, todoItems }];
}; export default useTodoList;
보시다시피 "useTodoList"라고 했습니다. 이 후크에는 TodoList 구성 요소의 논리가 포함되어야 합니다.
파일에 UI가 없다는 것을 알 수 있습니다. 이것은 사용자 정의 후크입니다.
그러나 주요 구성 요소인 "TodoList"는 어떻게 생겼을까요?
import React from 'react'; import useTodoList from './useTodoList'; const TodoList = () => { const [{ data, loading, error, todoItems }] = useTodoList(); if (loading) return <div>Loading...</div>; if (error) return <div>Error</div>; return <div>{JSON.stringify(todoItems)}</div>;
}; export default TodoList;
간단해? 이것이 바로 비즈니스 로직이 UI의 일부가 아닌 구성 요소를 빌드하고 사용자 지정 후크를 구성 요소에 대한 API로 처리하는 것이 중요한 이유입니다.
각 구성 요소가 독립형 모드에서 작동할 때 구성 요소 간의 통신은 어떻습니까? 이것은 우리가 다음 기사에서 다룰 흥미로운 주제가 될 것입니다.
- SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
- PlatoAiStream. Web3 데이터 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
- 미래 만들기 w Adryenn Ashley. 여기에서 액세스하십시오.
- PREIPO®로 PRE-IPO 회사의 주식을 사고 팔 수 있습니다. 여기에서 액세스하십시오.
- 출처: https://www.codementor.io/esmatnawahda/how-to-separate-logic-from-ui-with-react-components-by-esmat-ibrahim-javascript-in-plain-english-25c8b0j0uf
