React Native

Read Docs ->Installation, Installing dependencies into an Expo managed project 설치각 navigator 사용을 위해 각각의 설치가 필요하다.ex) Native Stack Navigatorex) Bottom

Expo 프로젝트 생성을 위해 홈페이지에 접속하여New project 를 통해 생성하였지만 더 간단히 생성이 가능하다.터미널 접속 ->vscode로 폴더진입 후 터미널 접속 ->이런 과정만 거치면 바로 배포까지 완료 된다.

Dimensions 를 사용하여 스크린의 너비를 구할 수 있다.굳이 px 을 써가면서 크기를 구할 필요가 없음.사용법px 단위로 사용하기 위해 합쳐서 사용!

배경 사용시 간편히 이용가능!

배경을 아래로 갈수록 어둡게! 밝게! 가능한 기능이다.설치간단한 사용방법

native에서 제공하는 swiper 기능이다.설치간단 사용예시!swiper 하고자 하는 목록을 swiper 태그로 감싼다.방향에 따라서 width, height 가 지정되어 있지 않으면 전체사이즈를 타겟 잡기 때문에swiper 할 목록의 사이즈를 지정해 주어야 동작한

웹은 기본으로 scroll 기능을 제공하지만 native 는 그렇지 않다.scroll 할 목록들을 태그로 감싸면 사용이 가능.기본이 세로 스크롤 이기 때문에 가로는 하나 추가만 해주면 된다.가로로 스크롤스크롤 바를 가리기(가로모드)

scrollView 와 거의 같은 태그.ScrollView 는 첫 렌더링에 모든 리스트를 렌더링 하지만FlatList 는 화면에 보여지는 리스트만 렌더링 하여list 의 content 량이 많다면 비효율 적이다. -> FlatList 사용!예제FlatList 는 자식을

입력된 email 이 형식에 따른 함수를 선언하고email 값이 변화할 때마다 적용되게 한 후email 이 변화된 것이 형식에 맞으면 경고 메시지 삭제,맞지 않다면 경고메시지를 띄우게 설정하였다.

Font 적용하기

로그인 할 때 비밀번호는 숨김으로 지정하는 것이 보안상에는 좋지만실제로 사용자가 입력할 땐 보이는 것이 편리하다.입력하기엔 좋음보안이 좋음눈모양 이모티콘을 클릭하여 보임/숨김 기능을 구현하였다.이 코드는 react-native 의 TextInput 태그를 사용할 때!s

alert 는 웹개발을 하면서 쉽게 유저에게 경고성 메시지나 안내 메시지를 보낼 수 있다.하지만 디자인적으로 alert가 표출 되기 때문에 조금 더 이쁘게 사용하기 위해Alert 를 사용할 수 있겠다.

goBack() 이전 페이지 새로고침,리렌더링 React-navigation 을 사용할 때, stack, bottomtab 이동을 한다. 이때, goBack() 은 이전 페이지로 돌아가는 네비 함수이다. Login 이나 navigate 로 이동한 페이지에서 상태

useFocusEffect 는 화면이 포커스 되었을 때 useCallback을 사용하여 함수를 재실행 시킨다.useEffect 는 재 렌더링 되었을때 실행되기 때문에 비슷하지만 다름.useIsFocused 와 같은 기능을 하기 때문에 리펙토링을 진행해 보았다.useFo