얼렁뚱땅

컴포넌트 재사용할 수 있는 조립 블록으로 화면에 나타나는 UI 요소 (ex. 제목, 입력창, 할 일 목록) 단순히 UI 역할만 하는 것이 아니라 부모로부터 받은 속성(props)나 자신의 상태(state)에 따라 다양한 기능을 수행 와이어프레임 최종 화면에 구성될 콘텐츠를 간단히 요약해서 보여주는 것 1. 내장 컴포넌트 RN에서는 다양한 내장 컴포넌트를 제공한다. 아래 링크에서 확인 가능하다. https://reactnative.dev/docs/components-and-apis Core Components and APIs · React Native React Native provides a number of built-in Core Components ready for you to use in your..

flex 고정값을 사용하지 않는 이유 기기마다 화면 크기의 차이 때문에 서로 다른 모습으로 나타나고 이런 다양한 크기의 기기에 대응하기 어렵기 때문. 따라서 비율로 크기가 설정되는 flex로 해결 flex가 1인 경우 : 자신이 차지할 수 있는 영역을 모두 차지 나머지는 비율대로 차지 정렬 1. flexDirection 자식 컴포넌트가 쌓이는 방향 column : 세로 방향으로 정렬(기본값) column-reverse : 세로 방향 역순 row : 가로 방향으로 정렬 row-reverse : 가로 방향 역순 2. justifyContent flexDirection에서 결정한 방향과 동일한 방향으로 정렬하는 속성 flex-start : 시작점에서부터 정렬(기본값) flex-end: 끝에서부터 정렬 cent..

리액트 네이티브에서는 스타일링 방식이 2가지가 있다. 인라인 스타일링 스타일시트 정의 스타일링 1. 인라인 스타일링 컴포넌트에 태그에 직접 스타일을 입력하는 방식 HTML에서는 문자열 형태로 스타일을 입력하지만, 리액트 네이티브에서는 객체 형태로 전달한다. Inline Styling 단점 동일 코드 반복 왜 해당 스타일이 적용되었는지 이해하기 어려움 2. 클래스 스타일링 스타일시트에 정의된 스타일을 사용하는 방법. CSS와 유사. import { StyleSheet, Text, View } from 'react-native'; export default function Mainscreen() { return ( MainScreen Page ); } const styles = StyleSheet.creat..

Stack Navigation 이란? 현재 화면 위에 다른 화면을 쌓으면서 화면을 이동하는 것. push와 pop을 이용하기 때문에 stack이다. Stack Navigation 라이브러리 설치 npm i @react-navigation/stack 파일, 폴더 구성 screen 폴더 Mainscreen.js Result.js navigations 폴더 MainscreenStack.js MypageStack.js (추후 생성 예정) 기본 구조는 tab이나 drawer와 비슷하다. src 밖 App.js -> src/App.js -> navigations/index.js -> MainTab.js -> MainscreenStack.js -> Mainscreen.js, Result.js 페이지 가져오기! src..