반응형
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 프로젝트가 점점 보기 좋아질 거예요!
반응형
'React' 카테고리의 다른 글
Props vs Context API? 차이와 흐름도, 예제로 완벽하게 이해하기 (0) | 2025.07.09 |
---|---|
useState vs useReducer 차이점은? 상태관리 기초 개념과 예제로 쉽게 정리하기 (0) | 2025.07.08 |
React Router DOM v6 완전 기초 정리! 페이지 이동부터 중첩 라우팅까지 한눈에 보기 (0) | 2025.07.07 |
실전 대시보드 UI 만들기 – MUI 또는 Ant Design으로 관리자 화면 구성하기 (0) | 2025.06.15 |
Ant Design 테마 커스터마이징 완전정복 – 토큰 시스템으로 나만의 스타일 만들기 (1) | 2025.06.14 |