프로젝트 진행 공부/리액트 네이티브(React Native)6 7장 요점 정리 7장 수정기능 구현 삭제기능 구현 검색기능 구현 달력기능 구현 옵셔널 체이닝(optional chaining) 문법 null이거나 undefined일 수 있는 객체의 프로퍼티를 에러 없이 접근 가능 아래의 두개의 예를 보자. 두 구문은 같은 의미이다. const log = route.params?.log; const [title, setTitle] = useState(log?.title ?? ''); const [body, setBody] = useState(log?.body ?? ''); const log = route.params ? route.params.log : undefined; const [title, setTitle] = useState(log ? log.title : ''); const .. 2022. 10. 11. 6장 요점 정리 6장 다이어리 어플 만들기 내비게이션 설정 Context API를 사용한 전역 상태 관리 Context에서 유동적인 값 다루기 children Props 여러줄 작성 및 포커스 이동 uuid 라이브러리 date-fns를 사용한 날짜 포맷팅 Animated를 사용한 애니메이션 효과 Context API 리액트에 내장된 기능으로 Props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유 Context를 만들 때는 createContext 함수를 사용 Context를 만들면 LogContext.Provider라는 컴포넌트와 LogContext.Consumer라는 컴포넌트가 생성. Provider는 Context 안에 있는 값을 사용할 컴포넌트들을 감싸주는 용도로 사용 Consumer는 사용하고.. 2022. 10. 11. 5장 요점 정리 5장 네비게이션 한 창에서 다른 창 이동할 때에 관한 내용 사이드 바(드로어)를 만들 수도 있다. 상단, 하단 탭으로 만들어서 이동 여러 화면으로 구성된 애플리케이션을 만들려면 내비게이션(navigation) 관련 서드 파티 라이브러리를 사용 종류는 아래와 같다. react-navigation: 리액트 네이티브 커뮤니티에서 관리, 사용률이 가장 높은 라이브러리. 리액트 공식 매뉴얼에서도 이 라이브러리로 화면을 전환하는 방법을 소개 내비게이션 기능이 자바스크립트로 구현 react-native-navigation: 홈페이지 제작 서비스 Wix에서 관리 이미 만들어진 네이티브 앱에 리액트 네이티브를 적용하는 경우 사용하기에 더 적합 내비게이션 기능이 각 플랫폼의 네이티브 코드로 구현 아래의 구문을 터미널에 쳐.. 2022. 10. 6. 4장 요점 정리 4장 객체와 배열 타입의 상태를 다룰 때는 불변성(immutability)을 지켜야 함 => 해당 객체를 직접 건드리지 않고 다른 객체를 만들어 덮어 씌워야 한다는 말 ...info는 spread 연산자 문법 아래처럼 펼쳐 넣는다고 생각하면 된다. 세번째 줄처럼 하면 b의 값이 만들어진 새로운 객체 안에서 덮어씌워진다. const object = { a: 1, b: 2, c: 3 }; const anotherObject = { ...object, d: 4 }; const anotherObject = { ...object, b: 4 }; 항목 추가하기 : spread 사용 / concat 사용 항목 제거하기 : filter 항목 수정하기 : map 아래처럼 filter 함수에 넣는 인자 중 두 번째 파라미.. 2022. 10. 4. 3장 요점 정리 3장 색상 코드를 정할 때는 Material Color(https://material.io/resources/color)를 주로 참조 색마다 코드가 뭔지 보기 쉽게 되어 있음. 현재 시간을 가져올 때는 Java Script의 Date 객체를 사용 Date의 기본 사용법 및 내장된 메서드를 확인 => ( http://bit.ly/mdn-date ) 시뮬레이터를 가동할 때 새로운 터미널 창으로 뜨는 것 = Metro Bundler 시뮬레이터에서 개발자 메뉴를 띄우는 방법 iOS에서는 윈도우 + D, 안드로이드에서는 윈도우 + M 윈도우와 리눅스에서는 Ctrl + M 시뮬레이터에서 개발자 메뉴를 띄우는 방법 크롬 브라우저 기준 맥OS에서는 윈도우 + 사람 얼굴 모양 같은거 + I 윈도우에서는 Ctrl + Sh.. 2022. 10. 4. 1, 2장 요점 정리 1장 자바스크립트의 코드 규칙을 일관성 있게 작성하고, 잠재적인 코드 실수를 방지하는 도구 => 바로 ESLint 들여쓰기, 세미콜론, 따옴표 등의 규칙을 한번에 정리 => Prettier 해당 에러가 자동으로 고쳐지게 만드는 방법은 아래 블로그 참고 https://arajo.tistory.com/366 2장 컴포넌트(component) : 구성요소 SafeAreaView : 디스플레이의 보이지 않는 영역 및 최하단 영역에 내용이 보여지는 것을 방지 View : 가장 기본적인 컴포넌트로 레이아웃 및 스타일을 담당. Text : 텍스트를 보여주는 역할. 웬만하면 function 함수로 컴포넌트를 선언해라. 대세임. JSX에서 자바스크립트 표현식을 보여줘야 할 때는 중괄호 ' {}' 로 감싸서 작성하면 됨... 2022. 9. 30. 이전 1 다음 728x90 반응형
