리액트 네이티브 2/E 2주차 강의자료

리액트 네이티브 2/E
#1
.slide_bg_img { opacity: 1 !important; }

로고

리액트 네이티트 2/E 2주차

코드종의 클래스

bg

지난 주 내용 다시 보기

:clock10: Just 10 min 지난 내용 질문

  • 리액트 네이티브 동작의 이해 : 브리지, VirtualDom
  • 프로젝트 생성 및 실행
  • :newspaper: 관련 뉴스

:telescope: 오늘 다룰 내용은?

  • 4장 모바일 컴포넌트
  • 5장 스타일

4장 모바일 컴포넌트

bg

리액트 네이티브에서 제공하는 각종 ==React.Component==

HTML 엘리먼트와 네이티브 컴포넌트의 유사성

리액트 리액트 네이티브
div View
span Text
li, ul FlatList, 자식 아이템
img Image
  • 대체할 수 없지만 비슷한 용도로 쓰임

React Native for Web

50쪽 : 리액트네이티브와웹앱의코드를서로공유할수있나요?

  • 리액트 네이티브 코드를 웹브라우저에서 돌아가게 만드는 프로젝트
  • Write once, render anywhere?
    • 믿거나 말거나??:scream_cat:
  • :thinking: 어떻게 가능할까?
    • React를 이용한 js코드는 화면에 어떻게 그려야되는지를 나타냄
    • 어떻게 그려야되는지까지 결정되었으니 그리는 실행 주체만 구현하면 OK

<Text> 1/2

  • :no_entry_sign: h1, em, strong 등이 없다.
  • <Text> 컴포넌트만이 플레인 텍스트 노드를 자식으로 가질 수 있다.
  • 중첩 가능
  • 일부 스타일이 상속된다. (Text 트리에서만 가능)
<Text style={{fontWeight: 'bold'}}>
	I am bold
	<Text style={{color: 'red'}}>
		and red
	</Text>
</Text>

/*
"I am bold and red"
0-9: bold
9-17: bold, red
*/

<Text> 2/2

  • 스타일이 적용된 컴포넌트를 만들어서 재사용
<Text>
The quick <Em>brown</Em> fox jumped over the lazy <Strong>dog</Strong>.
</Text>
  • 오동작을 막기 위해서는 text는 text와 관련된 일만 하도록 권장 (관련 jsdev.kr 글)
  • iOS / Android 전용 속성이 많다: 주의
    • adjustsFontSizeToFit & minimumFontScale : iOS only
    • textBreakStrategy : Android only
  • 개행 {'\n'} , 스페이스 {' '}

더 자세한 사항은 <Text /> 공식 문서

<Image>

언제나 공식 가이드 꼼꼼히 살펴봅시다.

<Image> 리소스 불러오는 두가지 방법

// 프로젝트 폴더에 넣은 이미지 (정적 이미지 리소스)
<Image source={require("./puppies.png")} />

// uri로 접근하는 이미지 (인터넷, 카메라롤 ...)
<Image source={{uri:"https://facebook.github.io/react/img/logo_og.png"}} 
 style={{width: 400, height: 400}} />
  • 원격 이미지 소스를 이용할 경우 이미지 사이즈를 따로 지정해야 한다.
  • 자식 컨텐츠를 가질 수 없다. 배경으로 이미지를 넣고 싶다면

<Image> 정적 이미지 리소스 장점

.
├── button.js
└── img
    ├── check@2x.png
    └── check@3x.png
    └── done.ios.png
    └── done.android.png

<Image source={require('./img/check.png')} />
<Image source={require('./img/done.png')} />
  • iOS와 Android 동일한 방법으로 사용
  • JS 파일처럼 관리되고 불러옴
  • 코드 변경할 때 처럼 시뮬레이터만 refresh해서 확인 가능
  • 이미지 사이즈, 비율, 디바이스 디스플레이 등을 알아서…

` 정적 이미지 리소스 사용시 주의 점

// GOOD
<Image source={require('./my-icon.png')} />;

// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
<Image source={require('./' + icon + '.png')} />;

// GOOD
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
<Image source={icon} />;

<Image> 원격 이미지 리소스

<Image>에서 유용한 속성

모바일에서는 화면의 가로 세로 비율이 다르므로 cover속성을 유용

image-20180928101934452

:point_up_2: 터치와 체스처 다루기 1/3

언제나 공식 문서부터 살펴보자

구분 미리 보기(출처) 비고
Button X 솔직히 안씀
TouchableOpacity
30%
30%800×262
투명
TouchableHighlight
30%
30%800×297
레이어
TouchableNativeFeedback
30%
30%800×299
Android ripple

:point_up_2: 터치와 체스처 다루기 2/3

  • <Button/> 타이틀을 정해서 누를 수 있도록
  • <TouchableHighlight>, <TouchableOpacity> 영역 전체가 누를 수 있도록 (마치 웹이 <a/>)
  • PandResponder : 디테일하게 다루기

:point_up_2: 터치와 체스처 다루기 3/3 : PanResponder

this._panResponder = PanResponder.create({
  // 누가 Responder가 될 것인가를 결정 true 혹은 false 리턴
  onStartShouldSetPanResponder: ()=>{},
  onMoveShouldSetPanResponder: ()=>{}
  onStartShouldSetPanResponderCapture: ()=>{}
  onMoveShouldSetPanResponderCapture: ()=>{}
  
  // 내가 Responder가 되거나 안 되는게 결정된 순간
  onPanResponderGrant: (e, gestureState) => {...},
  onPanResponderMove: (e, gestureState) => {...},
  
  // Responder일 때 호출될 수 있는 함수
  onPanResponderStart: (e, gestureState) => {...}
  onPanResponderMove: (e, gestureState) => {...}
  onPanResponderEnd: (e, gestureState) => {...}
  onPanResponderRelease: (e, gestureState) => {...}
  onPanResponderTerminate: (e, gestureState) => {...}
  onPanResponderTerminationRequest: (e, gestureState) => {...}  
});

리스트 관련 컴포넌트

  • <ListView> : deprecated! 쓰지마세요.
  • <FlatList>
  • <SectionList>
  • 예제 코드를 보면서 설명

리스트 관련 주요 개념

<FlatList
  data={[{key: 'a'}, {key: 'b'}]}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>
  • Item
  • data
    • key

Bestseller 예제를 살펴보자

4장 요약

  • <Text/>
  • <Image/>
  • <FlatList/>

:tada: 앱을 만드는 기본기는 갖춘 셈!
:nail_care: 이제 멋(style)을 낼 차례

5장 스타일

bg

스타일 정의 및 다루기
flex 레이아웃

스타일 정의 방법

  • 인라인 스타일
<Text>
  The quick <Text style={{fontStyle: "italic"}}>brown</Text> dog.
</Text>
  • 오브젝트로 스타일 정의
const bold = {
  fontWeight: "bold" 
};
  • Stylesheet.create 이용
const styles = StyleSheet.create({ 
  button: {
    borderRadius: "8px",
    backgroundColor: "#99CCFF" 
  }
});

어떤 방법으로 스타일을 써야 하나?

  • 오브젝트로 스타일 정의하기 보다 StyleSheet.create 이용
    • 생성한 스타일이 네이티브 영역에 존재하고 해당 스타일의 id만 브릿지를 통해서 전달되게 됨
  • 인라인은 아주 요긴

스타일 사용 팁

  • 스타일 병합
<Text style={[ styles.button, styles.accentText ]}>
  Wow
</Text>
  • 조건에 따른 적용
<View style={[
  styles.button, 
  this.state.touching && styles.highlight
]} />

위치 잡기와 레이아웃 디자인

5장 요약

  • 스타일의 다양한 선언 방법 : Stylesheet.create({})
  • 스타일을 다루는 법 : 병합, 조건…
  • flex 스타일

:house: 과제

안한다고 혼나지는 않아요.

  • Naver API를 이용한 BookList에 검색어를 붙여서 책 검색으로 만들어보자!

:pray: 오늘은 여기까지 입니다.

무엇이든 물어보세요.
감사합니다.

좋아요 1
#2

강의 중 보여드린 링크

  • svg를 폰트로 만들 때 요긴한 사이트 : https://icomoon.io

  • style 작업할 때 요긴한 도구 Storybook :

좋아요 2