지저분한 컴포넌트, 이렇게 바꿔보세요! React 리팩토링 꿀팁 정리

 

 

React로 프로젝트를 만들다 보면 점점 커지는 컴포넌트,
복붙으로 뒤죽박죽 된 코드들...
관리하기도 힘들고, 다른 사람이 보기에도 난감한 구조가 되기 쉽습니다.

이럴 때 필요한 게 바로 **‘리팩토링(Refactoring)’**입니다!
이번 포스팅에서는 실무에서도 자주 쓰는 컴포넌트 리팩토링 꿀팁 5가지를 예제와 함께 소개해드리겠습니다.

---

 

✅ 꿀팁 1. UI 쪼개기 (컴포넌트 분리)

하나의 컴포넌트에 300줄… 이건 절대 안 됩니다 😱
UI 단위로 잘라서 컴포넌트를 쪼개면 관리도 쉬워지고 재사용도 가능해집니다.

💡 Before

function Profile() {
  return (
    <div>
      <img src="..." />
      <h2>이름</h2>
      <p>설명</p>
      <button>팔로우</button>
    </div>
  );
}

💡 After

 

function Profile() {
  return (
    <div>
      <Avatar />
      <UserInfo />
      <FollowButton />
    </div>
  );
}

 

---

 

✅ 꿀팁 2. 반복되는 JSX는 map()으로 추출

같은 JSX가 여러 번 나오면 배열 + map()으로 리팩토링!

💡 Before

<ul>
  <li>🍎 사과</li>
  <li>🍌 바나나</li>
  <li>🍇 포도</li>
</ul>

💡 After

const fruits = ['사과', '바나나', '포도'];

<ul>
  {fruits.map((f) => (
    <li key={f}>🍎 {f}</li>
  ))}
</ul>

 

---

 

✅ 꿀팁 3. 조건부 렌더링은 &&, 삼항연산자, 함수로 정리

조건문을 반복적으로 쓰는 대신 깔끔하게 정리하는 게 핵심입니다.

💡 예시: 로그인 상태에 따라 버튼 변경

{isLoggedIn ? <LogoutButton /> : <LoginButton />}

 

또는 더 복잡하다면 renderButton() 같은 함수로 분리하세요.

---

 

✅ 꿀팁 4. useEffect 정리 (의존성 배열, cleanup 처리)

useEffect는 초기 렌더링, API 호출, 이벤트 리스너 등에 많이 쓰이는데
정리하지 않으면 메모리 누수와 예기치 않은 동작이 발생합니다.

💡 예시

 

useEffect(() => {
  const timer = setInterval(() => {
    console.log('ping');
  }, 1000);

  return () => clearInterval(timer); // 💥 cleanup!
}, []);

 

---

 

✅ 꿀팁 5. props 많을 땐 구조 분해 + defaultProps 사용

💡 Before

function Card(props) {
  return <div>{props.title}</div>;
}

💡 After

function Card({ title = '제목 없음' }) {
  return <div>{title}</div>;
}

 

→ defaultProps 또는 구조 분해로 가독성을 높이세요.

---

 

✅ 보너스! 리팩토링 체크리스트

항목	체크
하나의 컴포넌트는 100줄 이하로 유지했는가?	✅
반복된 UI를 map으로 처리했는가?	✅
조건부 렌더링을 함수/삼항연산자로 깔끔하게 했는가?	✅
불필요한 useEffect는 제거했는가?	✅
props가 많을 때 구조 분해했는가?	✅

 

---

 

✅ 마무리하며

리팩토링은 “코드를 더 잘 작동하게 만드는 것”이 아니라,
**“더 잘 읽히고, 유지보수하기 쉬운 구조로 바꾸는 것”**입니다.

 

작은 컴포넌트 분리부터 시작해서 하나씩 적용해보면 React 프로젝트가 점점 보기 좋아질 거예요!