React

✅ React 경험 

 

React 기반의 프론트엔드 화면 개발 경험이 있습니다.

단순한 UI 구성뿐만 아니라, 백엔드와의 API 연동, 상태 관리, 화면 렌더링 최적화 등을 수행했습니다.

주로 금융 시스템의 관리자 화면, 배치 데이터 조회 화면, 데이터 입력 및 검증 기능 등을 개발하면서, 사용자 편의성과 데이터 정확성을 중시한 화면을 구현했습니다.

React를 사용하면서 컴포넌트 단위 설계, Props와 State 관리, React Hook 활용에 대한 실무 경험을 쌓았고, Axios를 통한 API 연동, Redux 또는 Context를 이용한 상태 관리도 경험했습니다. 또한, 반응형 디자인, 재사용 가능한 UI 컴포넌트 설계, 성능 최적화에도 집중했습니다.

 

✅ React의 역할

✔️ 대면 채널 (창구 시스템)

• 은행 직원이 사용하는 퇴직연금 상담·가입 시스템
• 고객 정보를 조회하거나 상품 추천, 계약 진행하는 화면
• → React 기반의 웹 화면으로 구성됨 (Thick Client 형태)

✔️ 비대면 채널 (인터넷/모바일)

• 고객 스스로 퇴직연금 계좌 개설, 상품 변경, 운용 현황 조회
• IRP 계좌 관리, 출금 신청, 세금 신고 관련 업무
• → React로 SPA(Single Page Application) 형태로 개발

✔️ 공통 특징

• 화면 개발은 React
• 화면에서 필요한 데이터는 백엔드(Spring Boot)에서 API 형태로 제공
• GraphQL 또는 REST API 연동

🔥 정리

→ 퇴직연금 비즈니스 로직은 대부분 백엔드(Spring, 배치)에 있지만,
→ 모든 업무 흐름의 진입점은 React 화면에서 시작됩니다.

 

✅ 실무에서 React 개발 시 주의해야 할 점 & 특징

 

🔸 React 특징

컴포넌트 기반	재사용 가능한 단위로 UI 구성
SPA (Single Page Application)	화면 전환 시 페이지 새로고침 없이 동작
Hook 기반 상태 관리	useState, useEffect, useContext 등
가상 DOM	실제 DOM 변경 최소화 → 성능 최적화
백엔드 API 통신	Axios, Fetch, React Query, SWR 활용

 

🔸 React 주의 사항 (금융 도메인 기준)

1. ✅ 데이터 정합성 최우선
   • 금융 서비스는 UI 오류도 치명적 → 데이터 입력 검증 강화
   • 입력값 유효성 체크 (숫자, 소수점, 날짜 등)
2. ✅ 비동기 처리 꼼꼼하게
   • API 호출 시 로딩 상태, 에러 처리 반드시 명확히 표시
     → 예: "조회 중입니다", "일시적 오류가 발생했습니다."
3. ✅ 상태 관리 일관성 유지
   • 복잡한 상태는 Redux, Zustand, React Query 등 활용
     → 단순히 useState만으로는 상태 꼬임 발생 가능
4. ✅ 보안 고려
   • 화면에 민감한 데이터 노출 시 마스킹 처리
   • JWT나 세션 토큰 관리 철저 (프론트에서 유출 위험)
5. ✅ 접근성/UX 중요
   • 퇴직연금 대상 연령대가 다양함 → 폰트 크기, 명확한 버튼, 직관적 인터페이스 고려
6. ✅ 에러 없는 화면 전환
   • 금융 서비스는 페이지 새로고침이 아니라도 자연스럽게 라우팅되어야 함
     → React Router 활용
7. ✅ 배포 이후에도 안정성 중요
   • 화면 변경은 즉시 고객에게 노출 → QA 철저
   • Mock API 활용해서 백엔드와 비동기 개발 진행 가능

✅ 상태 관리	단순 상태는 useState, 복잡한 상태는 Redux/Zustand
✅ 입력 검증	숫자, 날짜, 소수점, 특수 문자 처리 엄격
✅ API 통신	Axios + 로딩 상태 관리 + 에러 핸들링 필수
✅ 컴포넌트화	공통 컴포넌트로 재사용성 강화
✅ UX 고려	반응형, 명확한 피드백, 접근성
✅ 테스트	화면 변경 → QA 없이 바로 배포 → 테스트 코드 및 Mock 필수

 

 

"React는 단순히 화면을 그리는 도구가 아니라, 퇴직연금처럼 데이터 정합성과 안정성이 중요한 금융 시스템에서는 백엔드와 동일한 무게를 가지고 있다고 생각합니다. API와의 긴밀한 통신, 상태 관리, 입력값 유효성 검증까지 프론트엔드 단에서도 매우 철저하게 관리해야 한다고 느꼈습니다."