반응형
22.3.8(화) +44days
우리는 리액트 시대에 살고 있다
패턴 둘러보기
클래스 컴포넌트
- 컴포넌트 라이프사이클
- 이벤트 바인딩
- Presentational / Container 패턴
함수형 컴포넌트
- Stateless
- 고차 컴포넌트
- Hooks
비동기 처리
- Lifecycle method, Event Handler, useEffect
- Redux Middleware
- React Query, SWR
- Suspense API
Solved Troubles
모든 라이브러리는 문제를 해결하기 위해 만들어졌다
jQuery
크로스브라우징 이슈 및 레거시 Web API의 부족한 기능 보완
Angular
데이터 바인딩 및 컴포넌트 단위 개발 패턴 정립
React
양방향 바인딩에 의한 성능 저하 문제 해결
짧고 간결한 함수형 컴포넌트 지원
리액트를 사용하는 이유
오랜 시간 사랑받는 라이브러리들의 공통점
거대한 커뮤니티
디버깅 부담 감소
다양한 3rd-party 라이브러리
지속적인 업데이트
신규 API 및 패턴 추가
FC, Hooks, Suspense
높은 자유도, 적은 제약
라우터, 상태 관리 라이브러리 등 선택이 자유로움
리액트를 아직도 사용하는 이유
라이브러리를 변경하는 기준
엔지니어 수요 증가
기개발된 React 기반 서비스가 많아지고 복잡해지면서 높은 이해도를 갖춘 엔지니어 수요 증가
패러다임 변화 부재
이미 React 기반으로 충분히 빠르게 동작하는 사이트
더 빠른 앱을 필요로 할 경우 최적화 역시 가능
Troubles in React
기존 패턴을 더 이상 사용하지 않게 된 이유
클래스 컴포넌트
- 컴포넌트 라이프사이클 API의 복잡성
- 이벤트 바인딩 시 this 바인딩에 주의해야 함
- Boilerplate 코드가 많음
함수형 컴포넌트
- 상태를 가질 수 없었음
- 고차 컴포넌트 패턴으로 해결 가능하나, 이해가 힘듬
- Hooks를 통해 해결됨
비동기 처리
- 다양한 방법 혼재
- Redux의 복잡한 비동기 처리
- React Query, SWR 로 대체 가능하나 기존 패턴가 차이가 커 많은 코드 변경을 필요로 함
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다
반응형
댓글