리팩토링 React: 한 번에 하나의 구성요소로 혼돈 길들이기-JS 튜토리얼-php.cn

Refactoring React: Taming Chaos, One Component at a Time

React 코드를 리팩토링하는 것은 혼란스러운 주방을 잘 정돈된 요리의 천국으로 바꾸는 것과 같습니다. 기능을 변경하지 않고 앱의 구조, 유지 관리성 및 성능을 개선하는 것입니다. 비대해진 구성요소나 복잡한 상태 로직과 싸우고 있다면 잘 계획된 리팩터링을 통해 코드베이스를 매끄럽고 효율적인 머신으로 변환할 수 있습니다.

이 블로그에서는 일반적인 리팩토링 시나리오를 살펴보고 실행 가능한 솔루션을 제공하며 React 앱의 진정한 잠재력을 발휘할 수 있도록 지원합니다.

나. 리팩토링이란 무엇이며 왜 중요한가요?

리팩토링은 기능을 변경하지 않고도 코드 구조를 개선합니다. 버그를 수정하거나 기능을 추가하는 것이 아니라 인간과 기계 모두에게 더 나은 코드를 만드는 것입니다.

리팩터링을 해야 하는 이유

가독성: 새벽 3시에 코드를 디버깅하는 것은 수수께끼 같은 퍼즐이 아니라 좋은 소설처럼 읽을 때 훨씬 쉬워집니다.
유지관리성: 깔끔한 코드베이스로 온보딩 시간을 절약하고 업데이트 속도를 높일 수 있습니다.
성능: 코드가 깔끔할수록 로드 시간이 빨라지고 사용자 경험이 부드러워지는 경우가 많습니다.

? 프로 팁: 성급한 최적화를 피하세요. 개발자 경험을 개선하거나 느린 렌더링 문제를 해결하는 등 명확한 요구 사항이 있는 경우 리팩터링하세요.

II. 코드 냄새 탐지

코드 냄새는 비효율성이나 복잡성을 나타내는 미묘한 신호입니다. 오류는 아니지만 개선이 필요한 부분을 나타냅니다.

일반적인 React 코드 냄새

부풀어오르는 구성요소
- 문제: 단일 구성 요소가 데이터 가져오기, 렌더링, 이벤트 처리 등 너무 많은 책임을 처리합니다.

   function ProductPage() {
     const [data, setData] = useState([]);
     useEffect(() => fetchData(), []);
     const handleAddToCart = () => { ... };
     return (
       <div>
         {data.map(item => <ProductItem key={item.id} item={item} />)}
         <button onClick={handleAddToCart}>Add to Cart</button>
       </div>
     );
   }

로그인 후 복사

해결책: 더 작고 집중된 구성 요소로 나눕니다.

   function ProductPage() {
     return (
       <div>
         <ProductList />
         <CartButton />
       </div>
     );
   }

   function ProductList() {
     const [data, setData] = useState([]);
     useEffect(() => fetchData(), []);
     return data.map(item => <ProductItem key={item.id} item={item} />);
   }

   function CartButton() {
     const handleAddToCart = () => { ... };
     return <button onClick={handleAddToCart}>Add to Cart</button>;
   }

로그인 후 복사

프롭 드릴링
- 문제: 여러 레이어의 구성 요소를 통해 소품을 전달합니다.

   <App>
     <ProductList product={product} />
   </App>

로그인 후 복사

해결책 1: 구성을 사용하세요.

   <ProductList>
     <ProductItem product={product} />
   </ProductList>

로그인 후 복사

해결책 2: 컨텍스트를 사용하세요.

   const ProductContext = React.createContext();

   function App() {
     const [product, setProduct] = useState({ id: 1, name: 'Example Product' }); // Example state
     return (
       <ProductContext.Provider value={product}>
         <ProductList />
       </ProductContext.Provider>
     );
   }

   function ProductList() {
     const product = useContext(ProductContext);
     return <ProductItem product={product} />;
   }

로그인 후 복사

중첩된 삼항 지옥
- 문제: 중첩된 삼항을 사용하는 복잡한 조건부 렌더링.

   return condition1 ? a : condition2 ? b : condition3 ? c : d;

로그인 후 복사

해결책: 도우미 함수나 스위치 문을 사용하여 리팩토링하세요.

   function renderContent(condition) {
     switch (condition) {
       case 1: return a;
       case 2: return b;
       case 3: return c;
       default: return d;
     }
   }

   return renderContent(condition);

로그인 후 복사

복제 논리
- 문제: 구성 요소 전체에 동일한 논리를 반복합니다.

   function calculateTotal(cart) {
     return cart.reduce((total, item) => total + item.price, 0);
   }

로그인 후 복사

해결책: 공유 논리를 재사용 가능한 유틸리티나 사용자 정의 후크로 옮깁니다.

   function calculateTotalPrice(cart) {
     return cart.reduce((total, item) => total + item.price, 0);
   }

   function useTotalPrice(cart) {
     return useMemo(() => calculateTotalPrice(cart), [cart]);
   }

로그인 후 복사

과도한 상태
- 문제: 파생 상태를 직접 관리합니다.

   const [isLoggedIn, setIsLoggedIn] = useState(user !== null);

로그인 후 복사

해결책: 대신 파생 상태를 사용하세요.

   const isLoggedIn = !!user; // Converts 'user' to boolean

로그인 후 복사

III. 상태 관리 단순화

상태 관리는 필수적이지만 금방 혼란스러워질 수 있습니다. 단순화하는 방법은 다음과 같습니다.

파생 상태: 계산하고 저장하지 않음

문제: 중복 상태를 저장합니다.
해결책: 소스에서 직접 파생된 값을 계산합니다.

  const [cartItems, setCartItems] = useState([]);
  const totalPrice = cartItems.reduce((total, item) => total + item.price, 0);

로그인 후 복사

복잡한 상태에는 useReducer 사용

문제: 여러 상호의존 상태.
해결책: useReducer를 사용하세요.

  const initialState = { count: 0 };
  function reducer(state, action) {
    switch (action.type) {
      case 'increment': return { count: state.count + 1 };
      default: return state;
    }
  }
  const [state, dispatch] = useReducer(reducer, initialState);

로그인 후 복사

주 코로케이션

문제: 로컬 데이터에 전역 상태가 사용됩니다.
해결책: 상태를 필요한 위치에 더 가깝게 이동합니다.

  // Before:
  function App() {
    const [filter, setFilter] = useState('');
    return <ProductList filter={filter} onFilterChange={setFilter} />;
  }

  // After:
  function ProductList() {
    const [filter, setFilter] = useState('');
    return <FilterInput value={filter} onChange={setFilter} />;
  }

로그인 후 복사

IV. 구성요소 리팩토링

구성요소는 한 가지 일을 잘 수행해야 합니다. 예:

구성요소당 하나의 작업

function MemberCard({ member }) {
  return (
    <div>
      <Summary member={member} />
      <SeeMore details={member.details} />
    </div>
  );
}

로그인 후 복사

브이. 성능 최적화

React 프로파일러

프로파일러를 사용하여 병목 현상을 식별하세요. 개발자 도구의 "프로파일러"에서 액세스하세요.

메모

비용이 많이 드는 계산 최적화:

   function ProductPage() {
     const [data, setData] = useState([]);
     useEffect(() => fetchData(), []);
     const handleAddToCart = () => { ... };
     return (
       <div>
         {data.map(item => <ProductItem key={item.id} item={item} />)}
         <button onClick={handleAddToCart}>Add to Cart</button>
       </div>
     );
   }

로그인 후 복사

참고: 자주 업데이트되는 종속성 때문에 메모 기능을 과도하게 사용하지 마세요.

VI. 테스트 가능성을 위한 리팩토링

사용자 중심 테스트 작성:

   function ProductPage() {
     return (
       <div>
         <ProductList />
         <CartButton />
       </div>
     );
   }

   function ProductList() {
     const [data, setData] = useState([]);
     useEffect(() => fetchData(), []);
     return data.map(item => <ProductItem key={item.id} item={item} />);
   }

   function CartButton() {
     const handleAddToCart = () => { ... };
     return <button onClick={handleAddToCart}>Add to Cart</button>;
   }

로그인 후 복사

VII. 유지 관리를 위한 최종 마무리

기능별 정리:

   <App>
     <ProductList product={product} />
   </App>

로그인 후 복사

절대 가져오기 사용:

   <ProductList>
     <ProductItem product={product} />
   </ProductList>

로그인 후 복사

VIII. 치트시트

Category	Tip
Code Smells	Split bloated components; avoid prop drilling.
State Management	Use derived state; colocate state.
Performance	Use Profiler; optimize Context values.
Testing	Test behavior, not implementation details.