리팩토링 React: 한 번에 하나의 구성요소로 혼돈 길들이기

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

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

---

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

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

리팩터링을 해야 하는 이유

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

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

---

II. 코드 냄새 탐지

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

일반적인 React 코드 냄새

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

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

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

   function ProductPage() {
     return (
       <div>
         <productlist></productlist>
         <cartbutton></cartbutton>
       </div>
     );
   }

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

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

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

   <app>
     <productlist product="{product}"></productlist>
   </app>

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

   <productlist>
     <productitem product="{product}"></productitem>
   </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></productlist>
       </productcontext.provider>
     );
   }

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

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

   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);

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

   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]);
   }

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

   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}"></productlist>;
  }

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

---

IV. 구성요소 리팩토링

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

구성요소당 하나의 작업

function MemberCard({ member }) {
  return (
    <div>
      <summary member="{member}"></summary>
      <seemore details="{member.details}"></seemore>
    </div>
  );
}

---

브이. 성능 최적화

React 프로파일러

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

메모

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

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

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

---

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

사용자 중심 테스트 작성:

   function ProductPage() {
     return (
       <div>
         <productlist></productlist>
         <cartbutton></cartbutton>
       </div>
     );
   }

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

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

---

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

1. 기능별 정리:

   <app>
     <productlist product="{product}"></productlist>
   </app>

1. 절대 가져오기 사용:

   <productlist>
     <productitem product="{product}"></productitem>
   </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.

카테고리

---

팁 코드 냄새 부풀어 오른 구성 요소를 분할합니다. 프롭 드릴링을 피하세요. 상태 관리 파생된 상태를 사용합니다. 같은 위치에 있는 상태입니다. 성능 프로파일러를 사용하세요. 컨텍스트 값을 최적화합니다. 테스트 구현 세부정보가 아닌 테스트 동작.

위 내용은 리팩토링 React: 한 번에 하나의 구성요소로 혼돈 길들이기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!