React로 웹 애플리케이션을 개발할 때, 다양한 기술과 도구들을 함께 배우는 것이 매우 유용합니다.
아래는 React 개발 시 함께 배우면 좋은 기술과 도구들을 정리한 목록입니다.
1. JavaScript (ES6+)
React는 JavaScript로 작성 되어 있으므로, JavaScript의 최신 기능들을 잘 이해하고 있어야합니다. 특히 ES6 이후 도입된 기능들은 React코드 작성에 매우 유용합니다.
• 화살표 함수
• 템플릿 리터럴
• 디스트럭처링 할당
• 모듈 시스템 ( import / export )
• 클래스와 객체 지향 프로그래밍
2. JSX
React에서 UI를 정의할 때 사용하는 문법으로, HTML과 유사한 구문을 JavaScript 내에서 사용할 수 있게 합니다. JSX의 기본 문법과 사용법을 잘 이해해야합니다.
3. 상태관리 (State Management)
React의 상태관리는 컴포넌트 내부의 상태와 전역 상택를 관리하는 것 모두를 포함합니다.
• React의 useState, useReducer Hook : 컴포넌트 내부의 상태를 관리
• Redux : 복잡한 애플리케이션의 전역 상태 관리를 위한 라이브러리
• Context API : 중첩된 컴포넌트 트리에서 전역 데이터를 관리하는 방법
4. React Router
클라이언트 사이드 라우팅을 구현하여 SPA(Single Page Apllication)에서 URL에 따라 다른 컴포넌트를 렌더링합니다.
• React Router : 다양한 라우팅 기능을 제공하는라이브러리
5. 스타일링
React 컴포넌트의 스타일을 정의하는 방법들입니다.
• CSS/SCSS : 전통적인 스타일링 방식
• CSS-in-JS : JavaScript 파일 내에서 스타일을 정의하는 방식 (예: styled-components, Emotion)
• Tailwind CSS : 유틸리티 퍼스트 CSS 프레임워크
6. 폼 처리와 유효성 검사
사용자 입력를 처리하고 유효성을 검사하는 라이브러리들입니다.
• Formik : 포믈 다루기 위한 라이브러리
• React Hook Form : React Hook을 활용한 폼 관리 라이브러리
• Yup : 폼 유효성 검사를 위한 라이브러리
7. HTTP 요청 및 데이터 페칭
API와의 통신을 처리하는 방법들입니다.
• Fetch API : 기본 JavaScript API
• Axios : 더 많은 기능을 제공하는 HTTP 클라이언트
• React Query : 서버상태를 관리하고 데이터 페칭을 최적화하는 라이브러리
8. 빌드 도구 및 번들러
React 애플리케이션을 개발하고 배포할 때 사용하는 도구들입니다.
• Webpack : 모듈 번들러
• Babel : 최신 JavaScript를 구형 브라우저에서도 실행 가능하게 변환.
• Vite : 빠른 빌드와 개발 서버를 제공하는 빌드 도구
• Create React App : React 프로젝트를 쉽게 설정할 수 있는 CLI도구.
9. 테스트
React 애플리케이션을 테스트하는 방법들입니다.
• Jest : JavaScript 테스트 프레임워크
• React Testing Library : React 컴포넌트를 테스트하기 위한 도구
• Cypress : 엔드 투 엔드 테스트 도구
10. 상태 관리 도구
대규모 애플리케이션에서 상태관리를 더 효과적으로 할 수 있도록 도와주는 도구들입닏.
• MobX : 반응형 상태 관리를 위한 라이브러리
• Recoil : Facebook 에서 만든 상태 라이브러리
11. 최적화 및 성능개선
애플리케이션의 성능을 최적화하는 방법들입니다.
• React.memo : 컴포넌트의 불필요한 리렌더링을 방지
• useMemo, useCallback : 값과 함수의 메모이제이션
• Code splitting : Webpack을 사용한 코드 분할
12. DevTools
개발을 도와주는 다양한 도구들입니다.
• React Developer Tools : 브라우저에서 React 컴포넌트 트리를 탐색
• Redux DevTools : Redux 상태와 액션을 디버깅
13. 타입스크립트 ( TypeScript )
JavaScript에 정적 타입을 추가하여 코드의 안정성을 높이는 방법입니다.
• TypeScript : 타입스크립트의 기본문법과 React와의 통합.
14. 기타 유용한 라이브러리
React 개발을 더 쉽고 효율적으로 만들어주는 다양한 라이브러리들입니다.
• Lodasch : 유틸리티 함수 모음 유틸리티
• moment.js : 날짜와 시간을 다루는 라이브러리(현재는 Day.js가 더 가볍고 추천됨)
• classnames : 조건부로 CSS클래스를 적용하는 라이브러리
이외에도 프로젝트 요구 사항에 따라 다양한 도구아 라이브러리를 선택하여 사용하게 됩니다.
React개발르 시작하면서 위의 기술들을 함께 학습하면, 더 견고하고 효율적인 웹 애플리케이션을 구축할 수 있을 것입니다.