[RN] Core Components #1

Plan 0·2023년 4월 29일
0

react-native

목록 보기
1/1

0. react와 react-native의 차이

우선 react와 react-native의 차이에 대해 먼저 집고 넘어가고자 한다.

react와 react-native의 가장 큰 차이라면 역시 웹이냐 앱이냐의 차이이다. react-native로 웹을 개발할 수도 있고 react로 웹앱을 개발해 앱처럼 쓸 수 도 있지만, 기본적인 부분을 따져보겠습니다.

  1. react : Virtual DOM을 통한 렌더링으로 Javascript를 이용해 HTML과 비슷한 문법을 이용해서 웹 애플리케이션을 구축하기 위한 라이브러리이다.

  2. react-native : react의 컴포넌트 기반 아키텍쳐를 활용, Javascript를 사용하여 모바일 애플리케이션을 개발하기 위한 프레임워크이다.


1. Basic Components

공식홈페이지의 Basic Components에 대해 이야기해볼까 합니다.

1. View component

  • react에서 사용하는 html 문법인 div 태그와 유사한 기능을 합니다.

  • 중요한 것은 View는 태그가 아니라 javascript와 css 를 이용해 디자인 된 component라는 점입니다.

  • 기본적인 구성 요소로 flexbox를 사용합니다.

    • flexbox란 ? "flexible box"의 줄임말로, 요소들 간의 공간 배분과 정렬을 돕는 모델을 말합니다.
    • 대충 CSS라고 이해하시면 쉬울 것 같습니다.

  • View component Props 중 주로 쓰는 것에 대해.

    • accessibilityState : 현재 상태를 설명할 때
    • accessibilityRole : 구성 요소의 목적을 설명할 때.
    • accessibilityValue : 현재 값
    • accessible : true 라면 접근 가능한 요소.
    • role : accessibilityRole보다 더 상위의 role에 대해.
    • style : 스타일을 정의 할 수 있습니다.

2. Text component

  • react에서 사용하는 text 태그와 유사한 기능을 합니다.
  • Text 안에 Text를 적어 추가적인 디자인을 할 수 있습니다.
  • 개행문자 {'\n'}를 이용해 줄바꿈을 할 수 있습니다.

  • Text component props 중 주로 쓰는 것에 대해.
    • onPress : 트리거를 누른 후 발동.
    • onPressIn : 트리거를 눌렀을 때 발동. (onPress보다 빠름)
    • onPressOut : 트리거를 뗐을 때 발동.
    • 추가로 위에 서술한 View의 props를 전부 쓸 수 있습니다.

3. Image component

  • 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 중 주로 쓰는 것에 대해.

    • height : 높이 지정이 가능합니다.
    • width : 너비 지정이 가능합니다.
    • source : 이미지 소스를 등록할 수 있습니다.
    • src : source보다 우선되는 이미지 소스입니다.
    • style : 위에 서술한 props들과 같습니다.

0개의 댓글