야수 길들이기: 지저분한 React 구성요소를 리팩터링한 방법

우리 모두 거기에 가봤습니다. 몇 달 전에 작성한 React 구성 요소를 열면 누군가가 서둘러 작성한 코드를 보는 것 같은 느낌이 듭니다. 마감 기한이 다가오고 기능을 출시해야 했습니다. 오늘은 지저분한 구성요소를 리팩토링할 시간입니다.

그래서 제가 해결한 방법은 다음과 같습니다.

초기 공포

가장 먼저 눈에 띄는 것은 구성 요소가 너무 커졌다는 것입니다. 상태 처리, API 호출, 복잡한 UI 로직 관리, 심지어 스타일 직접 적용과 같은 모든 작업을 수행하려고 했습니다. 540줄이 넘는 한 장의 파일이었는데, 마치 지도도 없이 정글을 헤매는 기분이었다.

첫 번째 단계는 현실을 받아들이는 것이었습니다. 이 코드는 더 이상 유지 관리할 수 없습니다. 글을 쓴 내가 무슨 일이 일어나고 있는지 간신히 따라갈 수 있다면 다른 사람은 가능성이 없을 것입니다. 그래서 분해하기로 했습니다.

무너뜨리기

저는 구성 요소의 다양한 책임을 식별하는 것부터 시작했습니다. 세 가지 명확한 영역이 있었습니다:

1. 상태 관리: 구성 요소의 상태 처리는 UI 로직과 얽혀 있습니다.

2. API 호출: 데이터 가져오기 및 로드 상태 처리

3. 렌더링 UI: 다소 복잡한 UI 구조로 데이터를 표시합니다.
   이러한 각 책임은 분리되어야 했습니다.

상태 및 API 로직에 대한 후크 추출

제가 가장 먼저 한 일은 상태 관리와 API 로직을 커스텀 후크로 추출하는 것이었습니다. 이를 통해 구성 요소가 정리되었을 뿐만 아니라 다른 곳에서 로직을 테스트하고 재사용하기가 더 쉬워졌습니다.

여기서 일부 코드 언급(원본 코드 아님):

function useDataFetching(apiEndpoint) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        let response = await fetch(apiEndpoint);
        let result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    }

    fetchData();
  }, [apiEndpoint]);

  return { data, loading, error };
}

useDataFetching을 사용하여 API 호출 로직을 꺼내고 로드 및 오류 상태를 처리했습니다. 이제 구성 요소는 이 후크를 호출하고 필요한 데이터를 깔끔하고 간단하게 가져오기만 하면 됩니다.

UI 로직 단순화
다음으로 렌더링 로직을 살펴보았습니다. 이전에는 렌더링 기능 내에서 로딩, 오류, 데이터 등을 모두 확인하고 있었기 때문에 따라가기가 꽤 어려웠습니다. 나는 이 로직을 다음과 같은 작고 독립적인 함수로 분리했습니다(물론 원래 함수는 아닙니다 ;)

function renderLoading() {
  return <p>Loading...</p>;
}

function renderError(error) {
  return <p>Error: {error.message}</p>;
}

function renderData(data) {
  return <div>{/* Complex UI logic here */}</div>;
}
//After that, component is ni much pretty shape

function MyComponent() {
  const { data, loading, error } = useDataFetching('/api/data-endpoint');

  if (loading) return renderLoading();
  if (error) return renderError(error);
  if (data) return renderData(data);

  return null;
}

최종 토크

구성요소를 세분화한 후 파일은 540줄 이상에서 약 124줄로 줄었고 논리를 훨씬 더 쉽게 따라갈 수 있습니다. 이제 구성 요소는 UI 렌더링이라는 한 가지 작업을 수행합니다. 다른 모든 것은 사용자 정의 후크 및 유틸리티 기능으로 오프로드되었습니다.

이 경험은 저에게 몇 가지 중요한 교훈을 더해주었습니다.

• 리팩토링을 두려워하지 마세요. 지저분한 코드를 그대로 두는 것은 쉽습니다. 특히 작동할 때는 더욱 그렇습니다. 하지만 시간을 내어 정리하면 당신의 삶과 미래의 당신의 삶이 훨씬 쉬워집니다.

• 관심 사항 분리: 서로 다른 위치(상태, API, UI)에 서로 다른 관심사를 유지함으로써 코드가 더욱 모듈화되고 재사용 가능하며 테스트 가능해졌습니다.

• 단순함 유지: 로직을 더 작은 함수로 오프로드하여 렌더링 기능을 단순화하면 구성 요소의 가독성이 훨씬 높아졌습니다.

그러므로 주변에 지저분한 구성 요소가 있다면 주저하지 말고 리팩토링하세요. 이는 단지 깨끗한 코드에 관한 것이 아니라 개발자로서 삶을 더 쉽게 만드는 것입니다. 누가 그걸 원하지 않겠어요?

위 내용은 야수 길들이기: 지저분한 React 구성요소를 리팩터링한 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!