React Native 04~13

28. React Navigation

리액트 네이티브에서 sreen간의 이동을 구현하기 위해서 React Navigation이라는 모듈 사용

필요한 모듈 설치

npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context
npm install @react-navigatin/native-stack

44. TailWindCSS

TailWindCSS 란?

HTML안에서 CSS 스타일을 만들 수 있게 해주는 CSS 프레임워크

CSS 프레임워크란?

CSS 프레임워크는 레이아웃 및 여러 컴포넌트의 구성, 브라우저 호환성을 보장하는데 소요되는 시간을 최소화하기 위해 여러 웹 개발/디자인 프로젝트에 적용할 수 있는 CSS 파일 모음
애플리케이션을 더 빠르게 스타일링 하는데 도움을 줌

css 프레임워크 종류 for React JS

• Material UI
• React Bootstrap
• Semantic UI
• Ant Design
• Materialize

Tailwind CSS의 장점

Tailwind CSS는 부트스트랩과 비슷하게 m-1, flex와 같이 미리 셋팅된 Utility Class를 활용하는 방식으로 HTML에서 CSS를 스타일링 할 수 있음

• 따라서 빠르게 스타일링 작업이 가능
• class 혹은 id명을 작성하기 위한 고생을 하지 않아도 됨
• 유틸리티 클래스가 익숙해지기 위한 시간이 필요할 수 있지만 InteliiSense 플러그인이 제공되어 쉽게 익숙해 질 수 있음

45. Tailwind CSS 적용하기

https://www.nativewind.dev/quick-starts/expo

53. useLayoutEffect

useLayoutEffect는 useEffect와 사용 문법이 똑같음
useEffect는 모든 DOM의 mutation이 끝나고 나서 실행. useLayoutEffect는 브라우저에 페인트를 하기 전에 실행됨

72. React Navigation을 이용해서 라우팅 구현하기

index.js 엔트리 파일

AppRegistry는 모든 React Native 앱을 실행하기 위한 JS진입점
App 루트 컴포넌트는 AppRegistry.registerComponent에 자신을 등록해야함. 그러면 기본 시스템은 앱에 대한 번들을 로드한 다음 AppRegistry.runAplication을 호출하여 앱이 준비되면 앱을 실행할 수 있음

function AppRegistry.registerComponent(appKey: string, getComponentFunc: ComponentProvider, section?: boolean | undefined): string

appKey

appKey는 app.json에 있는 name

• name: 프로젝트에 사용되는 짧은 이름이며 TitleCase여야 함
• displayName: 홈 화면의 앱 이름

Stack vs Tab

Stack Navigator는 React Native 앱이 Stack을 사용하여 화면 간에 전환을 할 수 있는 방법을 제공
예를 들어 로그인에서 가입 화면으로 이동하면 가입 화면이 로그인 화면 맨위에 쌓이고 뒤로 이동하면 가입 화면이 스택에서 꺼짐

Tab Navigator는 화면 하단이나 상단에 Tab이 있는 Navigator이며 다른 화면 사이를 전환하는데 사용
Tab Navigator는 Screen을 Component로 사용하거나 Stack을 Component로 사용할 수 있음