교육후 개인공부/React Native4 [RN] React native의 기본형태 import React from 'react';import {SafeAreaView, View, Text, StyleSheet} from 'react-native';const App = () => { return ( react );};const styles = StyleSheet.create({});export default App; 2024. 4. 30. [RN] SafeAreaView의미 SafeAreaView 컴포넌트는 iphone X 이상 기종에서 디스플레이의 보이지 않는 영역 및 최하단 영역에 내용이 보여지는 것을 방지해줍니다. 화면의 전체 영역을 사용할것이다. 따라서 가장 먼저 해야 하는 작업은 App 컴포넌트의 SafeAreaView가 전체영역을 사용하게끔 설정하는 것이다.이 작업은 flex 스타일 속성을 1로 설정하면 된다. flex 스타일 속성을 1로 설정하는 것은 자신이 위치한 곳의 영역을 모두 차지하겠다는 의미이다. 예시import React, {useState} from 'react';import {SafeAreaView, StyleSheet} from 'react-native';import Counter from './components/Counter';const .. 2024. 4. 29. [RN] Hook의 규칙 Hook을 사용할때의 규칙!!1. Hook은 컴포넌트의 최상위 레벨에서만 사용해야 합니다. 즉 Hook은 조건문이나 반복문 또는 중첩 함수에서 호출되면 안됩니다. 만약 함수의 흐름 중간에 리턴을 하는 경우에는 Hook은 함수가 리턴되기 전에 사용되어야 합니다.2. 여러 Hook을 사용하여 직접 Hook을 만들수 있습니다. 이를 커스텀 Hook이라고 부릅니다. react 패키지 외에서 불러오는 Hook은 모두 커스텀 Hook입니다. 3. Hook은 커스텀 Hook 또는 함수 컴포넌트에서만 사용할 수 있습니다. 클래스에서는 사용이 불가능하며, 리액트와 관련없는 일반적인 자바스크립트 함수에서 사용하면 오류가 발생합니다. 2024. 4. 29. [RN] css적용하기 App.jsimport React from 'react';import {SafeAreaView} from 'react-native';import Box from './components/Box';const App = () => { return ( );};export default App; components/Box.jsimport React from 'react';import {View, StyleSheet} from 'react-native';function Box() { return ;}const styles = StyleSheet.create({ box: { width: 64, height: 64, backgroundColor: 'black', .. 2024. 4. 29. 이전 1 다음