🔥 Trouble Shooting - React 컴포넌트의 return문 최적화: switch문 분리하기

💻 문제 상황

React 컴포넌트의 return문 안에서 switch문을 직접 사용하려다 발생한 에러

// ❌ 잘못된 방식
const Button = ({ type }) => {
  return (
    switch(type) {
      case "add":
        return <AddButton>Add</AddButton>;
      // ...
    }
  );
};

🔍 원인 분석

1. React 컴포넌트의 return문은 선언적이어야 함
2. 복잡한 조건문이 return 내에 있으면 가독성 저하
3. 상태 변경 시 불필요한 연산 반복 가능성

✅ 해결 방법

별도의 렌더링 함수를 만들어 로직 분리

// ✅ 올바른 방식
const Button = ({ type }) => {
  const renderButton = () => {
    switch (type) {
      case "add":
        return <AddButton>Add</AddButton>;
      case "delete":
        return <DeleteButton>Delete</DeleteButton>;
      case "back":
        return <BackButton>Back</BackButton>;
      default:
        return null;
    }
  };

  return renderButton();
};

🎯 해결 포인트

1. 렌더링 로직을 별도 함수로 분리
2. return문은 간단하게 유지
3. 조건부 렌더링 로직을 컴포넌트 내부에서 관리

💡 개선된 점

1. 가독성 향상

• 렌더링 로직이 명확하게 분리됨
• 컴포넌트의 구조가 더 직관적

2. 유지보수성 개선

• 버튼 타입 추가/수정이 용이
• 렌더링 로직 수정이 한 곳에서 가능

3. 성능 최적화

• React의 렌더링 최적화에 도움
• 불필요한 연산 방지

🚀 리팩토링 후 전체 코드

import styled from "styled-components";
import PropTypes from 'prop-types';

const AddButton = styled.button`
  width: 100%;
  padding: 8px;
  margin-top: 12px;
  // ... 스타일 속성
`;

const Button = ({ type }) => {
  const renderButton = () => {
    switch (type) {
      case "add":
        return <AddButton>Add</AddButton>;
      // ... 다른 케이스들
      default:
        return null;
    }
  };

  return renderButton();
}

Button.propTypes = {
  type: PropTypes.string
}

export default Button;

📝 배운 점

1. React 컴포넌트의 return문은 최대한 단순하게 유지
2. 복잡한 조건부 렌더링은 별도 함수로 분리
3. 컴포넌트 설계 시 가독성과 유지보수성 고려