솜이의 데브로그

로그인 화면 헤더 수정하기 options={{ headerBackTitleVisible: false }} Screen 컴포넌트에서 위의 옵션을 추가하면 화면의 헤더에서 뒤로가기 버튼의 타이틀을 감출 수 있다. 노치 디자인 대응 내비게이션의 헤더를 감추면 노치 디자인에 대한 문제가 발생할 수 있으므로 대응해야한다. SafeAreaView 컴포넌트 이용 스타일에 설정해야 하는 padding 값을 얻는 받법 useSafeAreaInsets 함수의 장점은 iOS 뿐만 아니라 안드로이드에서도 적용 가능한 padding 값을 전달한다는 점이다. 회원가입 화면 로그인 화면 제작 과정에서 만든 컴포넌트를 재사용하면 쉽고 빠르게 만들 수 있다. src/screens/Signup.js import React, { useS..

Reference : 처음 배우는 리액트네이티브 (김범준) 네비게이션 및 추가 라이브러리들을 먼저 설치한다. npm install @react-navigation/native expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view npm install @react-navigation/stack @react-navigation/bottom-tabs 스타일드 컴포넌트 라이브러리와 prop-types 라이브러리도 추가적으로 설치한다. src/theme.js const colors = { whi..

Reference : 처음 배우는 리액트 네이티브 (김범준) 모바일 애플리케이션에서 가장 중요한 기능 중 하나인 내비게이션을 만들어보자. 리액트 네이티브에서는 외부 라이브러리를 이용해야한다. npm install --save @react-navigation/native 리액트 내비게이션은 각 기능별로 모듈이 분리되어 있어 이후에도 사용하는 내비게이션의 종류에 따라 개별적으로 추가 라이브러리를 설치해야한다. 1. 리액트 네비게이션 스택 내비게이션 탭 내비게이션 드로어 내비게이션 내비게이션의 구조 Screen 컴포넌트 : 화면으로 사용되는 컴포넌트 name, component 속성을 지정해야한다. 항상 navigation과 route가 props로 전달된다. Navigation 컴포넌트 : 화면을 관리하는 ..

Reference : 처음배우는 리액트 네이티브 (김범준) 7. Context API 데이터를 전역적으로 관리하고 사용할 수 있도록 하는 기능. 스타일드 컴포넌트 역시 Context API를 이용해 theme을 애플리케이션 전체에서 사용할 수 있도록 했다. (1) 전역 상태 관리 데이터를 사용하는 컴포넌트가 많다면 최상위 컴포넌트인 App 컴포넌트에서 상태를 관리하여 하위 컴포넌트 어디서 필요로 하든 전달 할 수 있도록 해야한다. props를 이용하여 데이터를 전달하는 경우, 관리하는 상태가 추가되거나 변경될 경우 과정에 속한 모든 컴포넌트를 찾아서 수정해야한다는 단점이 있다. 따라서 개발 뿐만 아니라 유지보수에서도 매우 불편하다. Context API를 이용하면 Context를 생성해 필요한 컴포넌트에..

Reference : 처음 배우는 리액트 네이티브 Hooks 리액트 네이티브 16.8 버전에서 새롭게 추가된 기능이다. 컴퓨넌트의 상태를 관리하거나 생명 주기에 따라 특정 작업을 수행하려면 클래스형 컴포넌트를 사용해야 했다. 하지만 Hooks를 이용할 수 있게 되면서 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었다. useState useState 함수를 호출하면 변수와 그 변수를 수정할 수 있는 세터 함수를 배열로 반환한다. 파라미터로 전달한 값을 초깃값으로 갖는 상태 변수와 그 변수를 수정할 수 있는 세터 함수를 배열로 반환. 상태를 관리하는 변수는 반드시 세터 함수를 이용해 값을 변경해야 하고, 상태가 변경되면 컴포넌트가 변경된 내용을 반영하여 다시 렌더링한다. src/components/Cou..

Reference : 처음배우는 리액트 네이티브 기능 구현하기 추가, 삭제, 완료, 수정 기능을 구현해보자. 추가 기능 App.js 할일 항목은 내용, 완료 여부를 갖고 있어야하며 항목을 구분할 고유한 값(id)를 가져야한다. useState를 이용해 할 일 목록을 저장하고 관리할 task 변수를 초기값으로 임의의 내용을 입력한다. 최신항목이 가장 앞에 보이도록 tasks를 역순으로 렌더링되게 작성 key 값을 지정해야 하므로, id를 key로 지정한다. _addTask 함수가 호출되면 tasks에 새로운 할 일 항목이 추가되도록 수정한다. id로는 추가되는 시간의 타임스탬프 사용, text는 Input 컴포넌트에 입력된 값을 지정 새로운 항목이므로 완료여부는 항상 false, newTask의 값을 빈 ..

Reference : 처음 배우는 리액트 네이티브 (김범준) 할 일 관리 애플리케이션 등록 : 할 일 항목 추가 수정 : 완료되지 않은 할 일 항목 수정 삭제 : 할 일 항목을 삭제 완료 : 할 일 항목의 완료 상태 관리 위의 기능들을 포함한 애플리케이션을 만들어보자. 먼저 expo 프로젝트 생성후, 스타일 컴포넌트 라이브러리와 prop-types 라이브러리 설치한다. src/theme.js 생성 후 프로젝트에서 사용할 색 정의하기 export const theme={ background: '#101010', itemBackground: '#313131', main: '#778bdd', text: '#cfcfcf', done: '#616161', }; src/App.js import React from ..

Reference : 처음배우는 리액트 네이티브 리액트 네이티브에서의 스타일링은 CSS와 약간의 차이가 있다. CSS와는 달리 카멜 표기법으로 작성해야한다. 스타일링 인라인 스타일링 인라인 스타일링은 어떤 스타일이 적용되는지 잘 보인다는 장점이 있다. 그러나 비슷한 역할의 컴포넌트에 동일한 코드가 반복된다는 점과, 어떤 이유로 스타일이 적용되었는지 코드만으로 이해하기 어렵다는 단점이 있다. 클래스 스타일링 컴포넌트의 태그에 직접 입력하는 방식이 아니라 스타일 시트에 정의된 스타일을 사용하는 방법이다. 스타일 시트에 스타일을 정의, 컴포넌트에서는 정의된 스타일의 이름으로 적용. (CSS 클래스 이용법과 유사) 프로젝트를 생성하면 함께 생성되는 App.js 파일에서 클래스 스타일링이 적용된다. 스타일의 의도..