본문 바로가기

모바일 APP79

재사용 컴포넌트 (reusable components) 개발을 하다보면 아무리 프레임워크가 좋다고 해도 기존것을 기능에 맞춰 커스텀 해야 하는 경우가 생긴다. 재사용 컴포넌트란: 하나의 목적에 부합하는 것이 아니라 여러 코드에 범용적으로 적용하요 재사용 할수 있는 컴포넌트를 말한다. 그냥 합체라고 생각 하면 될듯... 특히 타입스크립트에서는: - ReactNode라는 타입, - children이라는 속성, - 수신하는 속성을 한꺼번에 다른 컴포넌트에 전달하는 기법이 필요하다. 기본사용법은 아래와 같다. // 재사용 컴포넌트 예시 import type {FC, ReactNode} from 'react' type SomeProps = { children?: ReactNode } export const Some: FC = ({children}) => { retur.. 2021. 9. 15.
인라인 스타일과 StyleSheet 스타일 차이 재렌더링은 상항에 따라 반복해서 발생한다. 그래서 상황에 맞게 스타일 속성을 설정 해줘야 하는데 인라인 스타일 : 자바스크립트 엔진쪽 스레드에서 UI 스레드 쪽으로 브리지를 경유하여 옮겨 가므로 내용이 컴포넌트 로직에 의해 바뀌지 않을때 앱의 디스플레이 속도가 떨어진다. StyleSheet: 생성된 스타일 객체는 UI 스레드 쪽에 캐시되므로 앱 전체 디스플레이 속도가 빨라진다. 그래서 내용이 변하지 않는 스타일 객체는 StyleSheet.create 방식으로 구현하며 동적으로 바뀌는 스타일 객체는 인라인 스타일 방식으로 구현하는게 좋다! 2021. 9. 14.
터처블 코어 컴포넌트 (Touchable) 특징 1. 컴포넌트 영역 터치시 OnPress 이벤트 속성에 설정된 콜백 함수를 호출한다. 2. 단 한개 자식 컴포넌트만 온다. Button, TouchableOpacity, TouchableHiglight 차이 Button : 커스텀에 제약 사항이 많고 일부 안드로이드 낮은 버전에서는 디자인 적용 안되는 경우도 있음. TouchableOpacity : 컴포넌트 바탕색 투명도 변화가 생김 모든 플랫폼 디자인에 이상 없이 동작 TouchableHiglight: 컴포넌트 바탕색 잠깐 바뀜 return( // button // touchahbleOpacity TouchableOpacity // touchahbleHighlight TouchableHighlight ) 모두 OnPress 이벤트 속성을 가지고 있.. 2021. 9. 13.
React-Native 특징 코어 컴포넌트 : 화면에 렌더링 하는 (, ..) API: 하드웨어 운영체제가 제공하는 기능 (platform, Alert) 속성: 프로그래밍 용어에서는 클래스의 멤버 변수를 의미한다. 컴포넌트도 화면 UI를 담당하는 클래스이므로 속성을 가진다. - 가변 mutable : 수시로 값이 바뀜 - 불변 immutable: 바뀌지 않음 따라서 리액트 네이티브는 값이 바뀌면 즉시 재렌더링을 해야한다. 즉 리액트 네이티브가 말하는 속성은 = 클래스속성 + 재렌더링 이다. JSX 속성 설정 // string 타입 속성값 지정 // number 타입 속성값 지정 // 객체 일때 // 부모 데이터를 자식에게 전달시 const person = {name:'ych', age: 22} export default functi.. 2021. 9. 8.
반응형

티스토리툴바