ProgrammingJavascript

[책] 리액트 네이티브 앱 제작 원론

, , ,

[책] 리액트 네이티브 앱 제작 원론


리액트 네이티브 앱 제작 원론
에릭 마시엘로,제이콥 프리드만 공저/이태상 역

컴포넌트 업데이트

1
2
3
4
5
6
shouldComponentUpdate(nextProps, nextState){
  if (this.props.uid !== nextProps.uid){
    return true;
  }
  return false;
}

리액트 네이티브

바벨이 낯설다면 https://babeljs.io/repl 에서 바벨 리플(Babel REPL)이라는 온라인 트랜스파일러를 사용해 볼 수 있다.

엑스코드 설치

XCODE

홈브루 설치

https://brew.sh

터미널에 붙여 넣어 실행한다.

1
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

노드, npm, 왓치맨, 플로 설치

1
2
3
brew install node
brew install watchman
brew install flow

리액트 네이티브 CLI 설치

1
npm install -g react-native-cli

Error: ACCESS:permission denied…

  1. npm config get prefix 를 실행한다.
  2. /usr/local 이 보인다면 sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}를 실행한다.
  3. 패스워드를 물어보면 패스워드를 입력하고 리턴을 누른다. 이로써 권한 설정이 완료된다.
  4. 만약 npm config get prefix 를 실행했을 때 다른 결과가 보였다면, npm 권한 문제를 해결하기 위한 자세한 사항을 설명하는 https://docs.npmjs.com/getting-started/fixing-npm-permissions 페이지를 확인해 본다.

루트 컴포넌트 등록

1
AppRegistry.registerComponent("HelloWrold", () => HelloWorld);

플렉스박스

justifyContent 속성을 사용하면 메인 축을 따라 아이템을 배치할 수 있다. 메인 축이 아닌 축을 크로스 축이라고 하며, alignItems 속성을 통해 크로스 축을 따라 아이템을 배치할 수 있다.

리액트 네이티브 컴포넌트

플럭스와 리덕스

플럭스 구현하기

높은 수준에서 보면 플럭스는 하나의 순환적인 패턴이라고 생각할 수 있다.
대개 그 순환은 뷰레이어에서 시작한다.
뷰레이어는 리액트 컴포넌트다.
사용자가 뷰와 상호작용을 하면 플럭스는 액션 생성자를 사용해 액션을 만든다.
이 액션은 디스패처에 전달되는데, 디스패처는 한 번에 하나의 액션만을 처리하는 싱글턴 컴포넌트다.
디스패처는 액션을 다시 해당 애플리케이션 스토어에 전달(디스패치)한다.
각 스토어는 액션을 처리하고 그에 따라 자신의 내부 상태를 변경한다.
그 다음엔 스토어는 변경사항을 등록된 뷰들에게 전파하고, 이는 다시 렌더링을 일으키며, 이로써 하나의 순환이 완성된다.

리덕스 설치

1
$ npm install redux --save

리액트-리덕스 설치

1
$ npm install react-redux --save

애니메이션과 제스처

  • Animated
  • LayoutAnimation
  • PanResponder
1
$ react-native install react-native-vector-icons

react-native-web

1
$ npm install --save react react-native-web
1
2
3
$ npm install --save-dev rnpm-plugin-windows
$ react-native windows
$ react-native run-windows
1
$ npm install react-native-macos-cli -g

참조 링크

공유하기