3-1기 스터디/React Native5 [5주차] 내비게이션 🔎 8장 내비게이션 모바일 애플리케이션에서 가장 중요한 기능 중 하나인 내비게이션을 만들어보자. 리액트 네이티브에서는 외부 라이브러리를 이용해야한다. npm install --save @react-navigation/native 리액트 내비게이션은 각 기능별로 모듈이 분리되어 있어 이후에도 사용하는 내비게이션의 종류에 따라 개별적으로 추가 라이브러리를 설치해야한다. 1. 리액트 네비게이션 스택 내비게이션 탭 내비게이션 드로어 내비게이션 내비게이션의 구조 Screen 컴포넌트 : 화면으로 사용되는 컴포넌트 name, component 속성을 지정해야한다. 항상 navigation과 route가 props로 전달된다. Navigation 컴포넌트 : 화면을 관리하는 중간 관리자 역할 여러 개의 Screen .. 2021. 11. 22. [4주차] Hooks와 Context API 🔎 6장 Hooks Hooks는 리액트 16.8 버전에 새롭게 추가된 기능입니다. Hooks를 사용해 컴포넌트 상태를 관리하거나 생명 주기에 따라 특정 작업을 수행할 수 있습니다. 6.1 useState useState 함수를 호출하면 변수와 그 변수를 수정할 수 있는 setter 함수를 배열로 반환합니다. const Counter = () => { const [count, setCount] = useState(0); return ( count: {count} setCount(count + 1)} /> setCount(count - 1)} /> ); }; ❓ 세터 함수 세터 함수에 변경될 상태의 값을 전달 세터 함수의 파라미터에 함수를 전달 그냥 변경될 상태의 값을 전달하는 경우 아래 코드의 setCou.. 2021. 11. 17. [3주차] 리액트 네이티브로 ✅TODO List 만들기 이번 주 리액트 네이티브 스터디 3주차 내용은 ✅투두 리스트 만들기입니다! 5장 할 일 관리 애플리케이션 만들기 이번 장에서는 4장까지 배운 내용을 바탕으로 TODO List 어플리케이션을 만들어보겠다. 5.0 애플리케이션 개요 5.0.1 파일 디렉토리 구조 ├── src │ ├── components │ │ ├── IconButton.js │ │ ├── Input.js │ │ └── Task.js │ ├── App.js │ ├── images.js │ └── theme.js │ ├── assets │ └── 이미지 파일들 └── App.js 5.0.2 세부 기능 등록: 할 일 항목을 추가하는 기능 수정: 완료되지 않은 할 일 항목을 수정하는 기능 삭제: 할 일 항목을 삭제하는 기능 완료: 할 일 항목의.. 2021. 11. 8. [2주차] 4장 스타일링 🎨 스타일링 리액트 네이티브는 자바스크립트를 이용해 스타일링 방법1. 인라인 스타일링 : 컴포넌트에 직접 스타일 입력 HTML의 인라인 스타일링과 비슷, but 객체 형태로 전달해야함 (HTML은 문자열 형태로 스타일 입력) 장점 : 어떤 스타일이 적용되는지 잘 보인다 단점 : 비슷한 역할을 하는 컴포넌트에 동일한 코드 반복 해당 스타일 적용 이유를 명확하게 이해하기 어려움 내용 방법2. 클래스 스타일링 : 스타일 시트에 스타일을 정의하고 컴포넌트에는 정의된 스타일의 이름으로 적용 = CSS 클래스를 사용하는 방법과 유사 장점 : 전체적인 스타일을 관리하기가 쉽다 const App = () => { return ( Inline Styling - Text ); }; const styles = StyleSh.. 2021. 11. 8. [1주차] 리액트 네이티브와 컴포넌트 (1장~3장) 저희 리액트 네이티브 스터디에서는 김범준의 '처음 배우는 리액트 네이티브'를 읽고 직접 실습하며 내용 요약을 진행합니다. 1주차에는 [1장: 리액트 네이티브란?], [2장: 리액트 네이티브 시작하기], [3장: 컴포넌트]를 읽고 리액트 네이티브에 대한 전반적인 개요를 접했으며, 주요 개념 중 하나인 컴포넌트에 대해 자세히 공부했습니다. 1️⃣ 1장 리액트 네이티브란? 리액트 네이티브는 2015년 3월 페이스북에 의해 공개된 오픈소스 프로젝트로, 이름에서부터 드러나듯 리액트에 기반을 두고 제작되었다. 하지만 리액트와는 달리 웹 브라우저가 아닌 네이티브(iOS, 안드로이드)에서 동작하는 애플리케이션을 만드는 자바스크립트 프레임워크다. 리액트 네이티브로 개발된 대표적인 앱으로는 페이스북, 인스타그램, 스카이프.. 2021. 10. 15. 이전 1 다음
