React Engineering

React를 렌더링 기반 UI 시스템으로 다룬다. Hook을 먼저 선택하지 말고 데이터 소유권, 사용자 이벤트, 외부 동기화 경계를 먼저 결정한다.

작업 절차

저장소의 React 버전, 프레임워크, 데이터 계층, 상태 관리, 린트, 테스트 도구와 기존 관례를 확인한다.
요구사항을 사용자에게 보이는 상태와 전이로 정리한다. 성공 경로뿐 아니라 loading, empty, error, retry, disabled 상태를 포함한다.
각 데이터의 원본을 하나만 정한다. 저장할 상태와 렌더 중 계산할 값을 분리한다.
컴포넌트 경계를 책임과 변경 단위로 정하고 state를 가장 가까운 공통 소유자에 둔다.
로직의 원인을 구분한다.
- 렌더 때문에 필요한 계산: 컴포넌트 본문
- 특정 사용자 행동 때문에 실행: event handler 또는 Action
- 외부 시스템과 계속 동기화: Effect
비동기 요청의 경합, 취소, 중복 제출, 실패 복구를 설계한다.
semantic HTML, 키보드 조작, accessible name, focus, 상태 알림을 구현한다.
타입 검사, React Hooks 린트, 행동 테스트, 빌드 순으로 검증한다. 저장소에 있는 명령만 사용하고 결과를 보고한다.