component_ReactNative

View

• UI를 구축하기 위한 가장 기본적인 구성요소로서 웹에서는 div와 사용성이 유사하다
• 중첩이 가능하며 레이아웃을 구축하기 위해 가장 많이 사용한다

Props

• onPress: 사용자가 View를 탭할 때 실행할 함수를 정의한다
• onLongPress: 사용자가 View를 오랫동안 탭할 때 실행할 함수를 정의한다
• onTouchStart, onTouchMove, onTouchEnd, onTouchCancel: 터치 이벤트에 대한 함수를 정의하여, 사용자가 View를 터치하는 동안 발생하는 이벤트를 처리할 수 있다
• onLayout: View의 레이아웃이 변경될 때 실행할 함수를 정의합니다. 이를 통해 사용자에게 뷰의 크기나 위치에 대한 정보를 제공할 수 있다
• onScroll: 스크롤 이벤트에 대한 함수를 정의하여, 사용자가 View를 스크롤할 때 발생하는 이벤트를 처리할 수 있다
• onContentSizeChange: 스크롤 가능한 내용의 크기가 변경될 때 실행할 함수를 정의한다
• 이 외에도 React Native의 View 컴포넌트는 onStartShouldSetResponder, onMoveShouldSetResponder, onResponderGrant, onResponderMove, onResponderRelease, onResponderTerminate 등 다양한 터치 이벤트 관련 props를 제공한다. 이러한 이벤트 처리 props를 활용하여 사용자와의 상호작용을 지원할 수 있다

Text

• text를 표현하기 위한 컴포넌트로 해당 컴포넌트 이외에서는 텍스트를 사용할 수 없다(에러요소)
• 종류로는 Text, TextInput이 있다
• Text 내부에 View 컴포넌트를 사용시 에러가 발생한다
• Text 컴포넌트 내부에 다른 컴포넌트 사용은 최대한 지양하고 불가피하게 써야하는 경우에는 혹시 이슈가 없는지 꼼꼼히 살펴봐야 한다
• 중첩해서 사용할 수 있다
• 중첩된 Text 컴포넌트는 inline-level처럼 동작하는데 margin, padding, border 등 box-model에 관련된 스타일이 적용되지 않다는 것을 주의

Touchable

• View나 Text에도 터치 핸들링을 제공하고 있으며 button 역할을 하는 컴포넌트가 여러개 존재한다

Button

• 기본적인 버튼 컴포넌트이다
• style props를 이용해 스타일링을 할 수 없기 때문에 UI개발시 활용도가 떨어진다
• 주요 props
  color: ios의 경우 버튼 텍스트 color, 안드로이드의 경우 버튼 배경색이 변경된다

TouchableHightlight

• 터치시 하이라이트가 발생한다
• 내부에 반드시 하나의 자식 컴포넌트를 삽입해야 한다
• 여러개의 컴포넌트가 필요하다면 View나 flagment(<></>)를 이용해 그룹화해야한다.
• 주요 props
  underlayColor: 터치시 하이라이팅되는 색상을 지정한다

TouchableOpacity

• 터치시 opacity값이 적용된다
• 다른 Touchable 컴포넌트와 달리 여러개의 자식요소가 올 수 있다
• 주요 props
  activeOpacity: 터치시 적용되는 opacity값을 설정한다(0~1)

Image

• • width, height 기재필수
• source props에 이미지 경로를 전달한다

1. 네트워크 이미지 호출 방식
   source={{uri:'https://hello.com/logo.png'}}

2. 내부 이미지 호출 방식
   source={require('~/images/icon.png')}

3. data URI 이미지 호출 방식
   source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEX...'}}

참고블로그