본문 바로가기

Wook's 개척일기234

[ReactNative 공부] Demensions 사용 Demensions 이건 해당 기기의 픽셀수를 직접 가져와서 대응하는것이다. 그래서 이걸 사용하여서 반응형으로 만들수가 있다. 이것의 사용법은 아래와 같다. 일단 import 를 해와야 한다. import { Button, View, Text,Image,TouchableOpacity,ScrollView, StyleSheet,SafeAreaView, Dimensions } from 'react-native'; 그렇게 하고 나면 이제 Dimensions를 쓸수가 있다. 사용법은 아래와 같다. Dimensions.get('window').height/3 이건 height를 사용한건데 width를 사용하고 싶음 width를 적으면 된다. /3 을 하게 되면 기기 화면에서의 30%된다. ※get()의 매개변수로 .. 2021. 5. 18.
[ReactNative 공부] SafeAreaView 란 SafeAreaView 아이폰에서 notch 디자인으로 나오면서 위에 header랑 밑에 바닥까지 나오게 되면서 문제가 생긴다. ex) 위처럼 못생겨지는데 이를 해결하기 위해서 있는게 SafeAreaView라는것이다. 해당 태그를 쓰면 아래처럼 깔끔해진다. ex) 참조 링크 : https://velog.io/@7p3m1k/react-native-태그SafeAreaView [react-native 태그]SafeAreaView 요즘 노치 디자인으로 핸드폰이 나와서 위와 같이 영역을 침범하는 경우가 있다이걸 해결하는 방법으로 SafeAreaView가 있다방법은 간단하다 view태그 대신 SafeAreaView 태그를 사용하면 된다.물론 impo velog.io 2021. 5. 18.
[ReactNative 공부] ScrollView와 Flatlist 이번엔 내가 ScrollView와 Flatlist에 대해서 알아보려고 한다. ScrollView ScrollView는 해당 뷰 안에 있는 모든 아이템들을 한꺼번에 렌더링을 한다. 그래서 ScrollView는 안의 데이터가 적을때만 사용해야만 한다. 왜냐하면 모든것을 한번에 렌더링을 하기 때문에 데이터들을 렌더링 하는것이 스크롤 하는것의 속도를 따라가지 못해 흰색 화면이 보여지게 된다. FlatList FlatList는 한꺼번에 렌더링을 하지 않고 설정한 갯수 만큼만 화면에 보여지게하고 그 이상은 스크롤이 따로 더 내려갈때 렌더링을 하게 해서 렌더링의 효율을 높일수가 있다. 일단은 난 ScrollView를 통해서 만들예정이다. 근데 지금 내가 겪고 있는 문제는 이렇게 만들고 ScrollView 안에 있는 .. 2021. 5. 18.
[React 기초] Props란 Props Props는 수정 수정 변경이 불가한 읽기전용이다. props는 부모 자식 관계가 형성되어야 의미가 있다. 왜냐면 부모 -> 자식으로 data가 전해지기 때문이다. 그래서 일방통행이다. 부모 컴포넌트로 전달받은 prop는 수정변경이 되지 않고 그대로 쓰이게 된다. 이걸 쓰는 이유는 부모하나만 만들면 자식들은 부모로부터 받기만 하면 되니 코드의 중복성을 제거할수 있다. 자 그럼 Props가 실제로 어떤역할을 하는지 알아보자. 일단 부모의 소스부터 보자. 부모소스 import PropsChild from './propsChild' class App extends Component{ state = { sampleText : 'Hello World', sampleBoolean : false, samp.. 2021. 5. 12.