Front/React

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

oodada 2024. 3. 24. 09:25

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
[Hooks] useState https://odada.me/274
   
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
   
[실습] React 할 일 관리 앱 만들기 https://odada.me/314
[Hooks] useContext https://odada.me/319
[Hooks] useReducer https://odada.me/317
[Hooks] useEffect, LifeCycle https://odada.me/313
[Hooks] 최적화 https://odada.me/315
   
비동기 기본 https://odada.me/337
비동기 예제 (뉴스 api) https://odada.me/309
   
TypeScript https://odada.me/359
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 테스트
티스토리 친구하기