useForm 훅 구현하기 [matzip/front/src/hooks/useForm.ts] 리액트에서 훅은 v16.8에 새로 도입된 기능으로, 함수형 컴포넌트(Functional Component)에서 사용되는 몇가지 기술들을 일컫는다. 리액트 훅은 함수형 컴포넌트(Functional Component)가 클래스형 컴포넌트(Class Compone...

최초 화면에 로고를 표시하기 위해 로고 파일 넣기 [matzip/front/src/assets/matzip.png] 해당 경로로 폴더 및 로고파일 넣어주도록하자 [matzip/front/src/screens/AuthHomeScreen.tsx] 파일 코드를 수정하자 20번째 줄에 react-native에서 기본으로 제공하는 Image 컴포넌트...

React란 React는 페이스북에서 개발한 오픈 소스 자바스크립트 라이브러리이며 컴포넌트라는 작은 조각들로 UI를 구성한다 또한 Virtual Dom이라는 개념을 사용하여 성능을 최적화한다 주요 특징 가독성과 유지보수성: JSX 문법을 사용하여 컴포넌트 기반으로 UI를 작성할 수 있으므로 가독성이 높고 유지보수가 용이하며 각 컴포...

개요 JSX 는 JavaScript 문법을 확장한것으로 JavaScript + XML/HTML로 볼 수 있다 JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다 JSX는 React “엘리먼트(element)”를 생성한다. React 엘리먼트는 브라우저 DOM 엘리먼트...

공통 컴포넌트 여러 페이지에서 버튼과 같이 동일한 스타일을 여러번 사용하고 싶은경우 컴포넌트를 생성해 가져다 사용하면 효율적으로 구현할 수 있다 Pressable 컴포넌트 Pressable 컴포넌트는 터치 이벤트를 처리하는 데 사용되는 컴포넌트이다 👉🏻리액트네이티브 Pressable 공식문서 여기를 참고 기본적으로 touchableopacit...

스크린 폴더 구조화하기 현재 스크린파일들은 [matzip/front/src/navigations/screens] 밑에 있는데 조금 더 세분화하여 구조화를 진행한다 screens auth AuthHomeScreen.tsx LoginScreen.t...

Drawer Navigator란 아래와 같이 화면 간 탐색을 위해 왼쪽(때로는 오른쪽)의 서랍을 사용할 수 있게해주는 기능이다 해당 프로젝트에서는 사용자가 바로 Drawer Navigation기능을 사용하는것이 아닌 로그인에 성공한 사용자만 Drawer기능을 사용하고 로그인하지 않은 사용자는 Stack Navigation기능을 사용한다 Dar...

반복되는 값과 변경되지 않는 변수들을 상수화하기위해 상수 파일을 만든다 [matzip/front/src/constants/navigations.ts] 파일을 작성한다 authNavigations는 각 스크린들의 네임을 매번 호출하기때문에 따로 상수화를 해주고 export로 외부에서 가져올 수 있도록하였다 나중에 버튼 색상등 반복되어 사용되는 고정...

Stack Navigation stack navigator라는 컨트롤러가 하위에 stack screen을 갖는데 새로운 스크린으로 이동할 때마다 Stack 맨 위에 싸여서, 순차적으로 앞뒤 화면 이동이 가능하게 해주는 기능이다 navigation 기능을 위해 AuthStackNavigator 코드 작성 [matzip/front/src/nav...

최초화면인 AuthHomeScreen 코드 작성 [matzip/front/src/screens/AuthHomeScreen.tsx] 파일을 작성한다 해당 파일은 로그인화면으로 이동, 회원가입화면으로 이동등의 기능을 갖는 사용자 최초 화면으로 사용예정 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 import React ...