search

poemyear / pickpic

2 stars 0 forks source link

Client App Preparation Guide #9

Open bakyuns opened 5 years ago

bakyuns commented 5 years ago

Install

Platform

React Native

Expo CLI Download

npm install -g expo-cli
expo init AwesomeProject cd AwesomeProject npm start

하지만, 현재 pickpic repo에서는 이에 대해서 expo init을 해놨으므로 따로 init은 필요 없다.

React Native 패키지 관리

brew install yarn yarn add SomePackage yarn add -D SomePackage # <- devDependency 관련

npm이 아닌 yarn으로 사용하는 이유는 yarn에서는 -D 옵션을 통하여 devdependency에 대한 packages를 받을 수 있다. devdependency는 대표적으로 **babel**이 존재하며, 이는 자바스크립트 컴파일러다. 내가 알기로는 typescript 혹은 flow에 대하여 컴파일시 js로 변환해주는 작업을 해주는 것으로 알고 있다.

Expo 패키지 관리

expo install SomePackage

현재 사용되고 있는 Packages

bakyuns commented 5 years ago

시작

Expo 시작

terminal 상에서

expo start
#혹은
yarn start

chrome으로 들어가지게 되면,

IOS Simulator 시작하고 Expo 앱을 통하여 현재 나의 앱 확인

watchman을 통하여 나의 소스가 변경되어 저장되면 바로 반영이 된다.

bakyuns commented 5 years ago

Client App 구조

Packages 추가

TypeScript

문법 소개

render

Upload Scene

poemyear commented 5 years ago

Bind 관련 React 공식 Doc

https://reactjs.org/docs/faq-functions.html#how-do-i-bind-a-function-to-a-component-instance 읽어보면 좋음

@bakyuns Event 내에서 함수 호출 시 전자 후자 모두 호출시마다 새로운 함수를 생성하는 방법이라고 함, Ref

Using Function.prototype.bind in render creates a new function each time the component renders, which may have performance implications (see below).

Using an arrow function in render creates a new function each time the component renders, which may break optimizations based on strict identity comparison.

권장안이 있는건 아닌듯; Bind in Constructor or Class Properties 인데 Class Properties는 아직 실험단계라고 하고, Bind in Constructor도 깔끔한거같진않음

Binding 방법 서술

https://blog.jaeyoon.io/2018/01/react-bind.html

this에 대해 이해하기 좋은 문서

https://blueshw.github.io/2017/07/01/arrow-function/

React에서 가이드하는 방법은 마지막 방법?

// 생성자에서 bind()를 사용하는방법
class LoggingButton extends React.Component {
  Constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

// 사용할 곳에서 bind()를 사용하는 방법
class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>
        Click me
      </button>
    );
  }
}

// 화살표 함수로 직접 호출하는 방법 
// 이 방법은 LoggingButton이 랜더링 될 때마다 새로운 함수를 생성하는 문제가 있다.
// 콜백 함수 내에서 재랜더링을 발생시키는 경우 성능 문제가 발생할 수 있다.
class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={(e) => this.handleClick(e)}>
        Click me
      </button>
    );
  }
}

// 화살표 함수로 선언하고 바인딩하는 방법
// 이 방법으로 이벤트를 바인딩 하는것을 권장한다.
class LoggingButton extends React.Component {
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

Ref: 리액트 교과서 - React에서 이벤트 다루기

poemyear commented 5 years ago

yarn add react-native-navigation yarn add react-native-gesture-handler