리액트(React.js) 커리큘럼

React 목차

과정	주소
react 둘러보기	https://ko.react.dev/
react 핵심 개념	https://odada.me/353
리액트용 ES6 문법	https://odada.me/322
node.js, npm 개념 잡기	https://odada.me/246
리액트란 무엇인가?	https://odada.me/250
리액트 컴포넌트(Component)	https://odada.me/254
리액트 속성(Props, Properties)	https://odada.me/271
리액트 이벤트(Event)	https://odada.me/273
리액트 조건부 렌더링 (Conditional Rendering)	https://odada.me/354
React Router Dom을 이용한 레이아웃 구성하기	https://odada.me/256
[style] styled-reset, styled-component, tailwind 으로 스타일링하기	https://odada.me/324
[style] Chakra-UI 로 스타일링 하기	https://odada.me/326
[실습] React로 반응형 웹사이트 만들기	https://odada.me/255
[실습] React Github, Netlify 배포	https://odada.me/279
[Hooks] useState	https://odada.me/274
[Hooks] useReducer	https://odada.me/317
[Hooks] useEffect, LifeCycle),	https://odada.me/313
[Hooks] useContext	https://odada.me/319
[Hooks] recoil	https://odada.me/355
[Hooks] 최적화	https://odada.me/315
[실습] React 할 일 관리 앱 만들기	https://odada.me/314
비동기 기본	https://odada.me/337
비동기 예제 (뉴스 api)	https://odada.me/309
API 통신	https://odada.me/309
TypeScript	https://odada.me/318
React Native
[실습] firebase 를 활용한 블로그 앱 만들기	https://odada.me/329

 

---

React 라이브러리

 

- 프레임워크

 

라이브러리	사이트	설명
React	https://ko.react.dev/	UI 구축을 위한 JavaScript 라이브러리
React Native	https://reactnative.dev/	모바일 앱 개발을 위한 React 프레임워크
Next.js	https://nextjs.org	React 프레임워크 (SSR/SSG)

 

- 스타일링

라이브러리	사이트	설명
Styled-components	https://styled-components.com	CSS-in-JS의 대표주자
SASS/SCSS	https://sass-lang.com	CSS 전처리기
Emotion	https://emotion.sh	고성능 CSS-in-JS
Tailwind CSS	https://tailwindcss.com	유틸리티 우선 CSS

 

- UI 컴포넌트

라이브러리	사이트	설명
Tailwind UI	https://tailwindui.com/	Tailwind 기반 프리미엄 UI 컴포넌트
Material-UI	https://mui.com	Material Design 기반 UI 라이브러리
Ant Design	https://ant.design	기업용 디자인 시스템
Chakra UI	https://www.chakra-ui.com/	접근성 중심 모던 UI 컴포넌트

 

- 라우팅/네비게이션

라이브러리	사이트	설명
React Router	https://reactrouter.com	웹 애플리케이션 라우팅
React Navigation	https://reactnavigation.org/	React Native 앱 네비게이션

 

- 상태 관리

라이브러리	사이트	설명
Redux	https://redux.js.org	가장 널리 사용되는 상태 관리 라이브러리
MobX	https://mobx.js.org	단순하고 확장 가능한 상태 관리
Recoil	https://recoiljs.org	Facebook의 실험적 상태 관리
Zustand	https://zustand-demo.pmnd.rs	간단하고 가벼운 상태 관리
React Query	https://tanstack.com/query	서버 상태 관리 특화

 

- 폼 관리

라이브러리	사이트	설명
Formik	https://formik.org	폼 상태 관리 및 검증
React Hook Form	https://react-hook-form.com	성능 중심 폼 관리
Yup	https://github.com/jquense/yup	폼 유효성 검증

 

- API/네트워킹

라이브러리	사이트	설명
Axios	https://axios-http.com	HTTP 클라이언트
SWR	https://swr.vercel.app	데이터 페칭
Apollo (GraphQL)	https://www.apollographql.com	GraphQL 클라이언트

 

- 애니메이션

라이브러리	사이트	설명
React Spring	https://react-spring.dev	물리 기반 애니메이션
Framer Motion	https://www.framer.com/motion	선언적 애니메이션
GSAP	https://greensock.com	전문적 애니메이션

 

- 유틸리티

라이브러리	사이트	설명
Day.js	https://day.js.org	날짜 처리
Lodash	https://lodash.com	데이터 조작
React Icons	https://react-icons.github.io/react-icons	아이콘 모음

 

- 테스팅

라이브러리	사이트	설명
Jest	https://jestjs.io	JavaScript 테스트
React Testing Library	https://testing-library.com/react	UI 테스트
Cypress	https://www.cypress.io	E2E 테스트