대부분의 애플리케이션은 데이터에 접근할 수 있는 유효한 사용자라는 것을 증명해야 하며, 인증 후 서비스를 이용할 수 있는 화면이 렌더링, 로그아웃 등으로 인증 상태를 해제하면 다시 인증을 위한 화면으로 이동함. 1. MainStack 내비게이션 const MainStack = () => { const theme = useContext(ThemeContext); return( ); }; export default MainStack; MainStack 내비게이션은 채널 목록 화면, 프로필 화면으로 구성된 MainTab 내비게이션을 첫 번째 화면으로 가짐. 실행 화면 2. MainTab 내비게이션 MainTab 내비게이션을 구성하는 채널 목록 화면 ChannelList.js, 프로필 화면 Profile.js ..
💡구현 목표 로그인/회원가입 : 이메일, 비밀번호를 이용한 로그인 및 회원가입 프로필 : 내 정보 확인 및 변경 채널 생성, 목록 조회 채널 : 실시간으로 메시지를 주고받는 독립된 공간 1. 프로젝트 준비 프로젝트 생성 expo init react-native-simple-chat//프로젝트 생성 npm install @react-navigation/native//리액트 내비게이션 설치 설치한 라이브러리 expo-image-picker : 기기 사진, 영상을 가져오는 기능 moment : 시간을 다양한 형태로 변경하는 등 시간과 관련된 많은 기능 제공 react-native-keyboard-aware-scroll-view : 키보드가 화면을 가리며 생기는 불편함 해결 react-native-gifted-..
일반적으로 모바일 애플리케이션은 하나의 화면이 아닌, 다양한 화면이 상황에 맞게 전환되면서 나타남. => 내비게이션(navigation)은 모바일 애플리케이션에서 가장 중요한 기능 중 하나임!! => 리액트 네이티브에서는 내비게이션을 지원하지 않는다. 외부 라이브러리를 이용해야 한다. 🤍리액트 내비게이션 리액트 네이티브 애플리케이션의 내비게이션을 쉽고 간단하게 관리할 수 있도록 도와줌 지원하는 내비게이션 종류 : 스택(stack) 내비게이션, 탭(tab) 내비게이션, 드로어(drawer) 내비게이션 구조 : NavigationContainer, Navigator, Screen 컴포넌트 Screen 컴포넌트 : 화면으로 사용되는 컴포넌트로, name과 component 속성을 지정해야함. name은 화면 ..
🤍Context API란 데이터를 전역적으로 관리하고 사용할 수 있도록 하는 기능 🤍전역 상태 관리 일반적인 리액트 네이티브(React-Native) 애플리케이션의 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달됨. 예를 들어, 어떤 데이터를 App 컴포넌트에서 관리할 경우, App 컴포넌트로부터 데이터를 필요로 하는 컴포넌트까지 props를 통해 값을 전달해 사용함. -> 하지만 props를 사용하는 방법은 번거로움. (관리하는 상태가 추가, 변경될 경우 과정에 속한 모든 컴포넌트를 찾아 수정해야함.) 이때, Context API를 생성하면 중간 과정에 있는 컴포넌트들을 거치지 않고 한 번에 원하는 데이터를 바로 받아와서 사용할 수 있다. 🤍Context API 실습 expo init react-nat..
🤍리액트 네이티브 훅(React Native Hooks)이란? 리액트 16.8 버전에서 새롭게 추가된 기능 이전에는 컴포넌트 상태 관리, 생명 주기에 따른 특정 작업 시 클래스형 컴포넌트를 사용해야 했음. Hooks는 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 연동할 수 있게 해주는 함수 Hooks 목적 useState 상태 유지, 변경 useEffect 이벤트 처리 useContext 정보 공유 useReducer 상태 유지 및 변경(Redux) useCallback 콜백 함수 캐시 useMemo 데이터, 값 캐시 useRef 특정 컴포넌트 선택 🤍리액트 네이티브 훅(React Native Hooks) 실습 expo init react-native-ho..
🤍 목표 기능 등록 : 할 일 추가 수정 : 완료되지 않은 할 일 항목 수정 삭제 : 할 일 삭제 완료 : 할 일 항목의 완료 상태 관리 기능 🤍 프로젝트 준비 프로젝트 생성 exop init react-native-todo //프로젝트 생성 cd react-native-todo npm install styled-components prop-types //프로젝트에서 사용할 라이브러리 설치 프로젝트에서 사용할 색상 정의 - theme.js export const theme = { background: '#101010', itemBackground: '#313131', main: '#778bdd', text: '#cfcfcf', done: '#616161', } 1.타이틀 만들기 import React f..
리액트 네이티브 스타일링은 웹 프로그램의 CSS 문법과 약간의 차이가 있다. 먼저 프로젝트를 생성해준다. expo init react-native-style 리액트 네이티브는 자바스크립트를 이용해 스타일링이 가능함. style 컴포넌트 속성이 있고, 인라인 스타일링 적용 or 스타일시트 사용 2가지 방법이 있다. 🤍스타일링 1. 인라인 스타일링 인라인 스타일링은 HTML 방식처럼 컴포넌트에 직접 스타일을 입력하는 방식이다. 웹프로그래밍 방식과 유사하지만, 위의 Text 컴포넌트처럼 비슷한 역할을 하는 컴포넌트에 중복 코드가 발생한다는 단점이 있다. 2. 클래스 스타일링 클래스 스타일링은 스타일시트(StyleSheet)에 정의된 스타일을 사용하는 방법이다, 위의 인라인 스타일링 방식보다 코드가 간결해진다...
🤍컴포넌트란? 재사용이 가능한 조립 블록, 화면에 나타나는 UI 요소이다. 단순히 UI역할만 하는 것이 아니라 부모로부터 받은 속성(props)이나 자신의 상태(state)에 따라 표현이 달라지고 다양한 기능을 수행한다. 🤍내장 컴포넌트 - Button 컴포넌트 버튼에 출력될 텍스트는 title 속성을 이용해 Button이라 지정하고, 버튼 클릭 시 Click이라는 확인창이 나타나도록 onPress 속성에 함수 지정 ◾실행 결과 🤍커스텀 컴포넌트 만들기 Button 컴포넌트는 Android와 iOS에서 다르게 보이기 때문에 TouchableOpacity를 사용하여 커스텀 컴포넌트 만들기 ◾실행 결과 MyButton.js에 onPress 함수를 주면 아래와 같은 결과가 나온다. 🤍props props란 p..