React 프로젝트를 200% 효율적으로 만드는 4가지 핵심 원칙

들어가며

새로운 React 프로젝트를 시작할 때마다 선택지가 너무 많아 고민하게 된다. 라이브러리를 비교하다 보면 방향을 잃고, 결국 시작조차 못 한 경험도 흔하다. 이 글은 라이브러리를 나열하지 않는다. 실무에서 반복 검증된 표준 기술 스택, 자동화된 프로젝트 시작 방식, 그리고 많은 개발자가 놓치는 핵심 개념을 정리한다. 목표는 React 프로젝트의 초기 품질과 개발 속도를 동시에 높이는 것이다.

이 글에서 다룰 핵심은 다음 네 가지다.

---

1. 한 줄 명령어로 끝내는 완전 자동화 프로젝트 셋업

React 프로젝트는 질문 없이 한 줄 명령어로 바로 생성할 수 있다. 프로젝트 이름이나 템플릿을 고르느라 시간을 쓸 필요가 없다.

npx -y create-vite@latest . --template react-ts --no-interactive

 

이 명령어의 역할은 다음과 같다.

• npx: 패키지를 설치하지 않고 한 번만 실행
• -y: 모든 확인 질문에 자동으로 yes
• create-vite@latest: 항상 최신 Vite 생성기 사용
• .: 현재 폴더에 바로 생성
• --template react-ts: React + TypeScript 강제 지정
• --no-interactive: 모든 CLI 질문 비활성화

-y와 --no-interactive를 함께 쓰면 완전 무인 실행이 된다. 이 명령어를 한 문장으로 요약하면 다음과 같다.

지금 폴더에 React와 TypeScript 기반의 최신 웹 프로젝트를 질문 없이 바로 만들어라

 

왜 이 자동화가 중요한가?

• 팀원마다 다른 옵션 선택을 막을 수 있다
• 신규 인원이 들어와도 동일한 구조로 시작할 수 있다
• CI 환경에서도 같은 명령어를 그대로 쓸 수 있다

즉, 프로젝트의 첫 순간부터 일관성이 확보된다.

---

2. 데이터 통신의 표준 조합: Axios + React Query

axios만 단독으로 사용하면 다음 작업을 모두 직접 해야 한다.

• 로딩 상태 관리
• 에러 처리
• 요청 재시도
• 데이터 캐싱

이 과정에서 useState와 useEffect가 복잡하게 얽힌 코드가 만들어진다. 해결책은 axios와 React Query를 함께 사용하는 것이다. 두 도구의 역할은 명확히 나뉜다.

역할	담당
HTTP 요청 실행	axios
요청 상태 관리	React Query

 

구조를 그림으로 보면 다음과 같다.

 

React Query 기본 예제

const fetchUsers = () =>
  axios.get('/api/users').then(res => res.data);

const { data, isLoading, error } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers,
});

 

이 코드에서 개발자가 직접 처리하지 않는 것들:

• 로딩 중인지 판단
• 에러 발생 여부
• 동일 요청에 대한 캐시
• 실패 시 재시도

React Query가 이 모든 것을 자동으로 관리한다. 덕분에 개발자는 데이터를 어떻게 쓸지만 고민하면 된다.

---

3. 아이콘 라이브러리를 두 개 쓰는 실무 전략

하나의 프로젝트에서 아이콘 라이브러리를 두 개 쓰는 것은 처음 보면 비효율처럼 보인다. 하지만 실무에서는 디자인과 성능의 균형을 맞추는 전략적인 선택이다. 두 라이브러리의 특징은 다음과 같다.

항목	MUI Icons	Lucide
스타일	Material 디자인 고정	미니멀·현대적
번들 크기	비교적 큼	가볍고 트리 쉐이킹 우수
디자인 자유도	낮음	높음

 

언제 어떤 아이콘을 쓰는가?

상황	선택
MUI 컴포넌트 위주 UI	MUI Icons
브랜드 색·개성 강조	Lucide
번들 크기 최소화 필요	Lucide
빠른 개발이 우선	MUI Icons

 

실무에서는 다음 전략이 흔하다.

• 기본 UI는 @mui/icons-material
• 브랜딩 영역이나 가벼운 화면은 lucide-react

이 방식은 일관성, 표현력, 성능을 모두 챙길 수 있다.

---

4. MUI 뒤에서 동작하는 진짜 엔진, Emotion

MUI를 사용하면 Emotion이라는 CSS-in-JS 라이브러리를 함께 사용하게 된다. @mui/material을 설치하면 다음 패키지가 자동으로 포함된다.

• @emotion/react
• @emotion/styled

Emotion은 MUI 컴포넌트의 스타일을 실제로 처리하는 스타일 엔진이다.

비유로 설명하면

• MUI: 예쁘게 만들어진 자동차 외형
• Emotion: 자동차를 움직이는 엔진

MUI의 테마, 커스터마이징, 동적 스타일링은 모두 Emotion 위에서 동작한다. 이 구조를 이해하면 MUI를 훨씬 안정적으로 다룰 수 있다.

---

마무리

효율적인 React 개발은 라이브러리를 많이 쓰는 것이 아니다. 각 도구가 맡은 역할이 분명한 구조를 만드는 것이다.

• 프로젝트 시작은 자동화된 한 줄 명령어로 통일하고
• axios는 통신만 담당하게 두며
• React Query가 서버 상태를 관리하고
• UI에서는 MUI와 Lucide를 상황에 맞게 조합하며
• 그 뒤에서 Emotion이 스타일을 책임진다는 구조를 이해해야 한다

이 네 가지는 단순한 팁이 아니다. 실무에서 반복 검증된 견고한 React 개발 방식의 핵심이다. 이제 이 표준 스택을 기반으로, 다음 프로젝트의 아키텍처를 어떻게 설계할지 고민해볼 차례다.