우선 react와 react-native의 차이에 대해 먼저 집고 넘어가고자 한다.
react와 react-native의 가장 큰 차이라면 역시 웹이냐 앱이냐의 차이이다. react-native로 웹을 개발할 수도 있고 react로 웹앱을 개발해 앱처럼 쓸 수 도 있지만, 기본적인 부분을 따져보겠습니다.
react : Virtual DOM을 통한 렌더링으로 Javascript를 이용해 HTML과 비슷한 문법을 이용해서 웹 애플리케이션을 구축하기 위한 라이브러리이다.
react-native : react의 컴포넌트 기반 아키텍쳐를 활용, Javascript를 사용하여 모바일 애플리케이션을 개발하기 위한 프레임워크이다.
react에서 사용하는 html 문법인 div 태그와 유사한 기능을 합니다.
중요한 것은 View는 태그가 아니라 javascript와 css 를 이용해 디자인 된 component
라는 점입니다.
기본적인 구성 요소로 flexbox
를 사용합니다.
View component Props 중 주로 쓰는 것에 대해.
style
: 스타일을 정의 할 수 있습니다.react에서 사용하는 img 태그와 유사한 기능을 합니다.
이미지를 렌더링하기 위한 React 구성 요소로, 로컬뿐만 아니라data: uri
체계나 네트워크에서 제공되는 데이터를 통해서도 이미지를 불러올 수 있습니다.
주의사항
은 Image를 통해 Gif나 WebP를 빌드할 때 기본적으로 android에서는 지원을 하지 않습니다. 때문에 android/app/build.gradle
의 필요에 의해 일부 모듈을 선택적으로 추가하여야 합니다.
dependencies {
// If your app supports Android versions before Ice Cream Sandwich (API level 14)
implementation 'com.facebook.fresco:animated-base-support:1.3.0'
// For animated GIF support
implementation 'com.facebook.fresco:animated-gif:2.5.0'
// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:2.5.0'
implementation 'com.facebook.fresco:webpsupport:2.5.0'
// For WebP support, without animations
implementation 'com.facebook.fresco:webpsupport:2.5.0'
}
Image component props 중 주로 쓰는 것에 대해.