React Native 기초 정리

React Native(RN) 기초에 대해 알아보겠습니다.

Styling

---

• CSS를 설정할 때 object의 namespace를 이용힙니다.
• 각 스타일의 속성의 구분은 ; 가 아닌 , 로 구분합니다.
• 스타일 속성 명의 구분은 -이 아닌 대문자로 구분합니다. (font-weight -> fontWeight)
• 'px', 'em' 등의 단위는 사용하지 않습니다. -> '%', 'rem' 을 사용합니다

  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  }

• 축약형이 존재하지 않습니다. 대신 상하, 좌우 값을 한 번에 조정할 수 있습니다.

  item: {
      marginVertical: "0rem",
      marginBottom: "4rem",
      marginLeft: "6rem",
  }

• :first-child, :nth-child, :focus 등의 가상, 의사, 자식, 형제 선택자를 이용할 수 없습니다.
• display 속성의 값이 flex와 none 두 가지 밖에 없습니다.

 

 

Component

---

RN은 HTML 태그를 사용하지 못하고 UI 구현을 위한 컴포넌트를 따로 제공합니다.

<View>

div 태그 같은 역할을 합니다.

<Text>

p 태그 같은 역할을 합니다. 텍스트를 입력 시에는 꼭 Text 안에 넣어야합니다.
Text가 아닌 다른 태그를 이용하여 텍스트를 넣으면 오류가 납니다.

<Image />

이미지를 넣을 시 사용합니다.
경로는 아래 코드와 같이 지정해줍니다.

  // 상대경로
  source={require('../img/logo.png')}
  // 절대경로
  source={{uri: `이미지 주소`}}

<TouchableOpacity>

버튼을 만들 때 주로 사용합니다.
터치 시 opacity의 변화를 주며 이벤트가 실행됩니다.

  <TouchableOpacity activeOpacity={0.8}>
      <Text>버튼</Text>
  </TouchableOpacity>

<ScrollView>

RN에서는 컨텐츠의 양이 많다고 해서 자동적으로 스크롤이 생기는 게
아니기 때문에 ScrollView를 사용하여 스크롤이 가능하도록 만들어 주어야 합니다.

<TextInput />

input 같은 역할을 합니다.

 

onChange를 사용하여 이벤트를 주어도 괜찮지만
onChangeText를 사용하면 더욱 편하게 조작 가능합니다.
e.target.value를 사용하지 않아도 현재의 값을 가져올 수 있습니다.

 

비밀번호를 입력 시 값이 보이지 않아야 하기 때문에

secureTextEntry={true} 를 사용해야 합니다.

  const onChangeName = (e) => {
      setUserName(e);
  }
  .
  .
  .
  <TextInput 
  placeholder="이름을 입력해 주세요"
  value={userName}
  style={styles.inputBox}
  onChangeText={(e) => {onChangeName(e)}}
  />

<FlatList>

react에서는 map을 사용하였으면 RN에서는 FlatList를 지향합니다.

한 번에 모든 데이터를 렌더링 하지 않고 화면에 보이는 영역만 렌더링 해주기 때문에 더 좋습니다.

  const listArr = ["A", "B", "C", "D", "E"];

  const renderListEl = ({item, index}) => {
      return(
          <Text>{item}</Text>
      )
  }

  <View>
      <FlatList
      // 반복을 할 배열
      data={listArr}
      // 렌더 할 아이템
      renderItem={renderListEl}
      // 교유 키값
      keyExtractor={(item, index) => index.toString()}
      >
  </View>

 

 

기본적으로 위와 같은 것들이 있으며 이외에도 다양한 것들이 있습니다!