[React-Native 공식문서] 같이 읽어보자(2) Workflow&Design
글 작성자: SoniaComp
공부한 기록을 공유하기 위한 글입니다. 수정할 내용이 있다면 알려주세요!
✅공식문서 링크
1. The Basics
2. Environment setup
3. Workflow
4. Design
5. Interaction
6. Inclusion
7. Performance
8. Javascript Runtime
9. Connectivity
10. Native Components and Modules
1. Workflow
1.1 장치에서 실행
배포하기 전에 준비하는 방법
1.2 FastRefresh
개발하면서,
React 구성요소를 편집한 내용을, 즉각적으로 볼 수 있음
방법: React-Native Developer Menu에서 “Enable Fast Refresh”버튼 누름
* React Tree 내에 있는 React Component나 다른 Module들은 수정된 부분만 리로드 된다.
* React Tree 외부의 모듈을 import한 파일을 수정할 경우 전체 리로드 한다.
For example, maybe your component also exports a constant, and a non-React utility module imports it. In that case, consider migrating the query to a separate file and importing it into both files. This will re-enable Fast Refresh to work.
FastRefresh의 syntax error, runtime error에 대처하는 법
FastRefresh는 local state를 유지하지만, 안전하지 않을 때 local state를 reload
Tip. @ refresh reset 를 사용할 경우, 강제로 state를 reset
Tip. useState, useRef는 Hook 호출 순서나, arguments를 변경하지 않을 경우, value 보존된다. Hook의 의존성들(useEffect, useMemo, useCallback)은 모두 fastRefesh가 발생할 때, refresh된다.
1.3 Debugging
디버깅하는 방법
1) In-app Errors and Warnings
2) Chrome Developer Tools
3) native Debugging
네이티브 코드만 있는 어플의 경우, $ npx react-native log-ios로 log 표시
1.4 Testing
정적 분석: 코드를 실행하지 않고, 코드 오류를 검사
Linter: 일반적인 오류 포착, 스타일 가이드(ESLint)
Type Checking: value 타입이 설계와 일치한지 체크(Flow)
테스트 가능한 코드 작성
항공기가 테스트를 마친 부품들로 조립되는 것처럼
작은 모듈로 코드를 작성하면 더 철저하게 테스트 가능
→ View Part(Component)와 비즈니스 로직 분리, State 분리
Think of a failed test as of a good thing!
Jest testing Framework: React Native의 Default Testing Template
Test를 구성하는 방법
→ 짧고, 한 가지만 테스트
→ 독립적(independent of one another, 다른 테스트에 의존성 없음)
→ Test에 명시할 3개!
(Given-precondition, When-testing action, Then-expected outcome)
* driven: 하나의 기능에 대한 여러 테스트를 묶어줌
* beforeEach, beforeAll: 테스팅할 객체 setting
Unit tests
쓰고 실행하기 빠름: 빠른 피드백
* Jest watch mode: 코드를 편집하면서 테스트를 지속적으로 실행
Mocking: 외부 의존성을 자신이 구현한 코드로 대체하는 것
(JS가 아닌 ObjectiveC나 Java로 쓰여진 native module에 의존해야 할 때 활용할 수 있음)
Integration Tests(통합 테스트)
real units들을 합쳤을 때, cooperation을 확인(일부 mock이 필요할 수도!)
Components Tests
broken UI를 막기 위한 Test
1) Interaction: interacted with by a user
사용자 관점에서 구성요소를 테스트, 여러 이벤트
→ 👍 사용자에게 보여지는 rendered text, accessibility helpers
→ 👎 component props, state, testID queries는 피해야 함
→ Hook을 사용하면 함수 구성요소 내부에 의존하지 않아 좋다😊
2) Rendering: the component render output is correct
Snapshot testing: JSX
→ implement components and run the snapshot test. And it saves the snapshot in your repo. The snapshot is committed and checked during code review. 만약 변경이 발생하면, 다시 commit 되고 review 된다.
→ 작은 snapshot만 사용(no-large-snapshots-rule)
→ change가 발생할 때, 두 component의 state 변화를 보려면, snapshot-diff
* Components Testing Tool
TestRenderer : DOM과 native mobile 의존성 없이, JS Object로 render 해줌react-native-testing-library, @testing-library/react-native + fireEvent, query
→ Node.js 환경에서만 Test 가능. ios나 android의 버그는 발견되지 않음
End-to-End Tests
사용자 관점에서 앱이 장치에서 예상대로 작동하는지 확인
신경쓰지 않는 것: Component, API, Redux, business logic
신경쓰는 것: 앱 화면의 요소를 찾고 제어(assertion을 만듦)
ex) authentication flow, core functionalities, payments
👎 작성시간이 오래 걸림, 느린 실행속도, 정상적으로 작동 안함
→ 쉽거나 덜 중요한 부분은 JS 로 테스트하는 것이 좋다.
* E2E Testing tools: Detox, Appium
1.5 Using Libraries
라이브러리 호환성 결정 방법
1) ReactNative와 함께 작동 되는지 직접 시도해본다.
2) ios, Android, Web, Windows와의 호환성 체크
3) 내 앱의 React Native 버전에서 작동하는지 체크
1.6 Using TypeScript with ReactNative
TypeScript를 사용하고 싶다면 클릭
1.7 Upgrading to new ReactNative Versions
새로운 버전의 React Native로 업그레이드 하여,
더 많은 API, View, 개발자 도구 및 기타 기능을 사용하고 싶다면 클릭
2. Design
2.1 Style
작성방법: CamelCase
Web의 CSS가 작동하는 방식과 일치StyleSheet.create 한 곳에서 여러 스타일을 정의할 수 있음 style props는 style subcomponents의 스타일을 지정하는 데 사용
* 텍스트 스타일을 정의하는 법
2.2 Height and Width
구성요소의 크기를 제어하는 방법
작성방법: 단위가 없다. (density-independent pixels로 나타남)
fixed height and width로 나타내거나 flex를 지정
Flex Dimensions
동적으로 늘어났다 줄어드는 component를 만들려면, flex를 사용flex:1은 전체 화면을 차지하는 것을 나타냄
2.3 Layout with Flexbox
그림으로 잘 설명된 Flexbox Layout 하는 방법 🎹보러가기
2.4 Images
정적 이미지 리소스: require(이미지 이름)
비디오, 프로젝트 파일(.mp3, .wav, .mp4, .mov, .html, .pdf): require네트워크 이미지
REST API 호출에서 인코딩 된 이미지 데이터
로컬 파일 시스템 이미지(CameraRoll)
중첩을 통한 배경이미지
→ 그때 그때 문서를 확인하며 사용방법 익히기! 📄 보러가기
2.5 Color Reference
RGB, HSL, Color ints, Named colors 모두 지원 🖍👩🎨 보러가기
