이원우: https://www.youtube.com/watch?v=uwI6eJPsHJY

1. View를 이루는 요소들

Props로 받을 수 있는 여러가지 accessibility 옵션이 있다.

접근성을 설정할 수 있는 옵션이 있다.
<View accessible={true}>
<Text>text one</Text>
<Text>text two</Text>
</View>

1) Flexbox

react native는 Flexbox를 기본적으로 사용한다.

flex - 웹에서 axis로 비율에 맞게 화면을 나눠주는 속성이다. 상수만 사용할 수 있다.
- 아래의 예시를 보면 순서대로 1/6 2/6 3/6의 비율로 화면을 화면을 분할해 가져간다.
- ```
<View style={{ flex: 1, backgroundColor: "red" }} />
<View style={{ flex: 2, backgroundColor: "darkorange" }} />
<View style={{ flex: 3, backgroundColor: "green" }} />
```
flexDirection :flex의 방향을 결정한다.
- column
- row
- coluimn-reverse
- row-reverse
direction: 레이아웃의 시작 방향
- LTR: 레이아웃의 시작 방향이 (왼 => 오)
- RTL: 레이아웃의 시작 방향이 (오 => 왼)
justifyContent : flexbox 세로 조작! => 브라우저하곤 반대임
- flex-start: stretch와 같은 기본 default 값
- flex-end: 끝으로 정렬
- center: 중앙 정렬
- space-between: 요소의 같은 간격 일정하게 유지
- space-evenly: 요소 외에 여백까지 간격을 일정하게 유지
alignItems: flexbox의 가로 축 조작! => 브라우저하고 반대
- stretch: default 값 높이에 맞게 조정
- flex-start: 자식들을 시작부터 나열
- flex-end: 자식들을 끝부터 나열
- center : 중앙 정렬
- baseline: 같은 베이스라인으로 슈슉슉 이거 말로 설명하기 좀 애매함.
alignSelf: 거의 안쓰지만 요소는 alignItems하고 똑같음. 한 자식 요소에만 적용할 때 사용
alignContent
flexWrap
- wrap: 넘치면 다음 줄
- no-wrap 넘쳐도 같은 줄
etc
- flexBasis
- flexGrow
- flexShrink

*사이즈 및 포지션

width: 너비
- auto: 자동 너비 조절
- pixels: 일반 상수로 사용 가능
  - ex) width: 300
- percentage: 퍼센트로 가능
  - ex) width: 50%
position: 박스의 포지션 결정
- 아래의 요소들은 top bottom left right 속성을 사용 가능함.
- absolute
- relative

2) style

color
- [https://reactnative.dev/docs/colors](네임드 컬러 목록)
fontWeight
fontSize
margin
- 이것은 찾으면 넣겠음. 상수로 사용함.

3) some touch handling(터치에 관한 동작 처리)

onPress: 터치로 눌렸을 때 동작
onLongPress: 터치로 길게 눌렸을 때 동작
- Platform.OS: 동작은 아니지만 os가 안드로이드가 아니면 비활성화 하는 등에 사용 가능.

Touchable: 레이아웃의 일종으로 피드백 없이 터치하거나 투명도를 조정해주는 등에 활용되는 레이아웃

import { Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';

예시에서 보게된 팁

props로 받은 label또한 변수로 활용하고 상위에서 state를 활용해 눌릴 때마다, 동적으로 스타일 객체를 바꿔줄 수 있다.
- ```
<View style={[styles.container, { [label]: selectedValue }]}>
  {children}
</View> //이 부분이다.
```
- 기본 css를 사용할 때 동적으로 스타일을 변경할 수 있다.
- styled-components로는 더 쉽게 가능하다.

import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

const FlexDirectionBasics = () => {
  const [flexDirection, setflexDirection] = useState("column");

  return (
    <PreviewLayout
      label="flexDirection"
      values={["column", "row", "row-reverse", "column-reverse"]}
      selectedValue={flexDirection}
      setSelectedValue={setflexDirection}
    >
      <View
        style={[styles.box, { backgroundColor: "powderblue" }]}
      />
      <View
        style={[styles.box, { backgroundColor: "skyblue" }]}
      />
      <View
        style={[styles.box, { backgroundColor: "steelblue" }]}
      />
    </PreviewLayout>
  );
};

const PreviewLayout = ({
  label,
  children,
  values,
  selectedValue,
  setSelectedValue,
}) => (
  <View style={{ padding: 10, flex: 1 }}>
    <Text style={styles.label}>{label}</Text>
    <View style={styles.row}>
      {values.map((value) => (
        <TouchableOpacity
          key={value}
          onPress={() => setSelectedValue(value)}
          style={[
            styles.button,
            selectedValue === value && styles.selected,
          ]}
        >
          <Text
            style={[
              styles.buttonLabel,
              selectedValue === value && styles.selectedLabel,
            ]}
          >
            {value}
          </Text>
        </TouchableOpacity>
      ))}
    </View>
    <View style={[styles.container, { [label]: selectedValue }]}>
      {children}
    </View>
  </View>
);

export default FlexDirectionBasics;

2. Text에 대하여

Nested Text: 중첩 텍스트

    <Text style={styles.baseText}>
      I am bold
      <Text style={styles.innerText}> and red</Text>
    </Text>

Container: 텍스트를 담는 컨테이너 텍스트

//인라인 스타일
//넘치지 않는 선에서 이어짐.
// |First part and second part|
<Text>
  <Text>First part and </Text>
  <Text>second part</Text>
</Text>

//일반 뷰 스타일
// |First part and|
// |second part   |
<View>
  <Text>First part and </Text>
  <Text>second part</Text>
</View>

예시에서 보게된 팁

리엑트 네이티브가 추천하는 방식

텍스트의 스타일은 중복으로 여러가지 스타일을 입히기 어려운 특징이 있다.
즉, 기본적으로 사용하는 스타일의 텍스트를 컴포넌트로 만들고, 상속해서 오버라이딩 혹은 추가할 수 있다.

ex)

1----

<View>
  <MyAppText>
    Text styled with the default font for the entire application
  </MyAppText>
  <MyAppHeaderText>Text styled as a header</MyAppHeaderText>
</View>

2----

class MyAppHeaderText extends Component {
  render() {
    return (
      <MyAppText>
        <Text style={{ fontSize: 20 }}>
          {this.props.children}
        </Text>
      </MyAppText>
    );
  }
}

3.ScrollView에 대하여

중요: 스크롤 뷰는 bounded height(묶는 높이)가 존재해야만 동작한다.

즉, 높이가 정해진 스크롤 뷰 안에 높이가 정해지지 않은 자식 요소들이 들어갈 수 있다.

* ScrollView vs FlatList

ScrollView
- 스크롤뷰는 자식 요소들을 한꺼번에 불러오기에 성능 저하의 요인이 될 수 있다.
- 엄청 많은 자식 요소들이 존재한다고 상상해보자. 엄청 렌더링이 느려진다.
- 출력할 데이터가 많지 않고, 고정일 때 사용
FlatList
- 플렛리스트는 스크롤이 내려갈 때마다 새로 렌더링을 지연적으로 해준다. 즉 무한 스크롤!
- 보여질 때 쯤이면, 알아서 렌더링을 해준다. 만약 스크롤 영역 밖으로 사라지면 알아서 지워서 메모리와 프로세스 시간을 줄여준다.
- 무한 스크롤이 등에 사용
- 속성
  - data : 들어갈 데이터
  - renderItem : 컴포넌트 형태로 선언해서 속성 값으로 넣어줌
  - keyExtractor : 반복되는 요소의 디폴트 키 값 대신에 react key 값을 가져옴.
  - numColumns : horizental={false}가 필수. flexWrap처럼 지그재그로 컬럼을 나눔 => 상수 값 받음.
  - extraData : 클릭하면 색상을 바꿔주는 등 상태 변화 시에 무조건 렌더링이 다시 일어나게 해준다.
    - 예시
VirtualizedList
- 플렛 리스트에 가상 데이터 넣을 수 있게 해줌!
- 예시만 확인
SectionList
- 섹션을 구분지을 수 있다.

4. Button에 대하여

title: 버튼 텍스트
color: 색상
onPress: 눌렀을 때 동작
disabled: 비활성화
기타 accessibility
nextFocus 다양한 옵션
- nextFocusDown : 사용자가 아래로 탐색할 때 포커스를 받을 내용(버튼)
- etc..
- 문서

<Button
  onPress={onPressLearnMore}
  title="Learn More"
  color="#841584"
  accessibilityLabel="Learn more about this purple button"
/>

5. Switch

말 그대로 스위치 토글

토글 스위치로 속성은 아래와 같다
- disabled : 비활성화
- onChange : 값이 변화하면 해당 이벤트를 받음
- onValueChange : 값이 변화하면 변화된 값을 받음.
- thumbColor : 기본적인 스위치의 색상 지정
- trackColor : 커스텀 스위치 트랙 색상이다. true false 색상을 각각 지정 가능함.
- value

import React, { useState } from "react";
import { View, Switch, StyleSheet } from "react-native";

const App = () => {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

  return (
    <View style={styles.container}>
      <Switch
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"

6. TextInput에 대하여

Input value를 바인딩 해주는 방법

//상태 관리를 통해 onChangeText를 통해 바뀐 값을 업데이트 해준다.
const [text, onChangeText] = React.useState("Useless Text");

<TextInput
        style={styles.input}
        onChangeText={onChangeText}
        value={text}
      />

속성
- value
- placeholder
- keyboardType
  - numeric
  - etc
- maxLength
- editable
- multiline => true false
- numberOfLines
  - numberOfLines={4}
이벤트
- onChangeText
- onSubmitEditing
- onFocus
- etc => 문서엔 여기까지만 작성됨.

예시에서 보게된 팁

텍스트 인풋을 생성해놓고 props로 받아 구조 분해 할당으로 속성을 넣어줄 수 있다.

import React from 'react';
import { View, TextInput } from 'react-native';

const UselessTextInput = (props) => {
  return (
    <TextInput
      {...props} // Inherit any props passed to it; e.g., multiline, numberOfLines below
      editable
      maxLength={40}
    />
  );
}

const UselessTextInputMultiline = () => {
  const [value, onChangeText] = React.useState('Useless Multiline Placeholder');

  // If you type something in the text box that is a color, the background will change to that
  // color.
  return (
    <View
      style={{
        backgroundColor: value,
        borderBottomColor: '#000000',
        borderBottomWidth: 1,
      }}>
      <UselessTextInput
        multiline
        numberOfLines={4}
        onChangeText={text => onChangeText(text)}
        value={value}
        style={{padding: 10}}
      />
    </View>
  );
}

export default UselessTextInputMultiline;

7. Wrapper 및 컴포넌트 API에 대하여

1) BackHandler

뒤로 가기를 누르면 확인할 수 있는 alert 창을 띄울 수 있거나 동작을 줄 수 있음.
뒤로 가기는 자동으로 되는게 아니라 만들어줘야 사용가능함.
- 정말 뒤로 가시겠습니까?!
- 모달을 사용할 때 뒤로 가기를 통해 닫는 것은 또 다르므로 유의
- 예시

2) DrawerLayoutAndroid

누르면 옆에 네비게이션 슬라이딩하며 나오는 레이아웃
속성들이 많아서 직접 적용해보는 것 추천
예시

3) PermissionsAndroid

카메라 엑세스 허용해줄래요? 하면서 나오는 권한 요청 Alert 창
이거 비동기 요청임.

첫 인자로 권한을 요청할 기능을 담고, 두 번째로, 허용 창을 구성함.

const granted = await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,
      {
        title: "Cool Photo App Camera Permission",
        message:
          "Cool Photo App needs access to your camera " +
          "so you can take awesome pictures.",
        buttonNeutral: "Ask Me Later",
        buttonNegative: "Cancel",
        buttonPositive: "OK"
      }
    );

예시

4) ToastAndroid

토스트 메세지로 밑에 슥 떳다 사라지는 기능
- ```
ToastAndroid.showWithGravity(
     "All Your Base Are Belong To Us",
     ToastAndroid.SHORT,
     ToastAndroid.CENTER
   );
```
- 1. 메세지,
  2. 짧게 보여줄지 길게 보여줄지
  3. 보여줄 위치 선정,

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

220812.md

220812.md

1. View를 이루는 요소들

1) Flexbox

*사이즈 및 포지션

2) style

3) some touch handling(터치에 관한 동작 처리)

예시에서 보게된 팁

2. Text에 대하여

예시에서 보게된 팁

리엑트 네이티브가 추천하는 방식

3.ScrollView에 대하여

* ScrollView vs FlatList

4. Button에 대하여

5. Switch

`trackColor` : 커스텀 스위치 트랙 색상이다. true false 색상을 각각 지정 가능함.

6. TextInput에 대하여

예시에서 보게된 팁

7. Wrapper 및 컴포넌트 API에 대하여

1) BackHandler

2) DrawerLayoutAndroid

3) PermissionsAndroid

4) ToastAndroid

Files

220812.md

Latest commit

History

220812.md

File metadata and controls

1. View를 이루는 요소들

1) Flexbox

*사이즈 및 포지션

2) style

3) some touch handling(터치에 관한 동작 처리)

예시에서 보게된 팁

2. Text에 대하여

예시에서 보게된 팁

리엑트 네이티브가 추천하는 방식

3.ScrollView에 대하여

* ScrollView vs FlatList

4. Button에 대하여

5. Switch

trackColor : 커스텀 스위치 트랙 색상이다. true false 색상을 각각 지정 가능함.

6. TextInput에 대하여

예시에서 보게된 팁

7. Wrapper 및 컴포넌트 API에 대하여

1) BackHandler

2) DrawerLayoutAndroid

3) PermissionsAndroid

4) ToastAndroid

`trackColor` : 커스텀 스위치 트랙 색상이다. true false 색상을 각각 지정 가능함.