search

poemyear / pickpic

2 stars 0 forks source link

React Native Reference #1

Open bakyuns opened 5 years ago

bakyuns commented 5 years ago
bakyuns commented 5 years ago
poemyear commented 5 years ago

React Native Component Life Cycle

image https://velopert.com/1130

Yunmin-Ji commented 5 years ago

React Native Component Life Cycle

constructor : 생성자 메소드로서 컴포넌트가 처음 만들어 질 때 실행됨 이 메소드에서 기본 state 를 정할 수 있음

componentWillMount : 컴포넌트가 DOM 위에 만들어지기 전에 실행.

render : 컴포넌트 렌더링을 담당.

componentDidMount : 컴포넌트가 만들어지고 첫 렌더링을 다 마친 후 실행되는 메소드 이 안에서 다른 JavaScript 프레임워크를 연동하거나, setTimeout, setInterval 및 AJAX 처리

componentWillReceiveProps : 컴포넌트가 prop 을 새로 받았을 때 실행됨. prop 에 따라 state 를 업데이트 해야 할 때 사용하면 유용. 이 안에서 this.setState() 를 해도 추가적으로 렌더링하지 않음.

shouldComponentUpdate : prop 혹은 state 가 변경 되었을 때, 리렌더링을 할지 말지 정하는 메소드
(예: return nextProps.id !== this.props.id;) JSON.stringify() 를 쓰면 여러 field 를 편하게 비교 할 수 있음.

componentWillUpdate : 컴포넌트가 업데이트 되기 전에 실행됨. 이 메소드 안에서는 this.setState() 를 사용금지 – 무한루프빠짐.

componentDidUpdate : 컴포넌트가 리렌더링을 마친 후 실행됨.

componentWillUnmount : 컴포넌트가 DOM 에서 사라진 후 실행되는 메소드

poemyear commented 5 years ago

https://stackoverflow.com/a/43892905 array에 있는 원소들을 각각 DOM elements로 그릴 때 각 element에 key prop을 설정해줘야 하는데, 이 때 key 값이 유니크해야한다고 함. array의 index를 그대로 key로 사용하면 괜찮을 수 있지만, array의 중간원소가 빠진다거나 변경되는 경우에는 이미 매핑이 됐던 key가 다시 사용될 수 있으므로 중복이 발생할 수 있음

느낌만 이해했고 key가 유니크하지 않은 경우에 리액트가 수정된 엘레먼트가 아니라 모든것을 다시 렌더해야한다는게 문제점인듯함

poemyear commented 5 years ago

about React Hook: https://medium.com/trabe/react-useref-hook-b6c9d39e2022

ParallaxImage Usage with hooks https://github.com/archriss/react-native-snap-carousel/blob/master/doc/PARALLAX_IMAGE.md#example-to-use-with-react-hooks

Carousel Class Definition https://github.com/archriss/react-native-snap-carousel/blob/1aebb185036813b1104ea01fc6229b43f10f4d9c/src/carousel/Carousel.js#L1119

bakyuns commented 5 years ago

화면이동에 관한 example https://snack.expo.io/@react-navigation/auth-flow-v3

poemyear commented 5 years ago

DatePicker

https://github.com/xgfe/react-native-datepicker#readme expo 호환가능

https://github.com/wojtekmaj/react-date-picker#readme expo 체크안해봄

https://github.com/henninghall/react-native-date-picker 이게 더 깔끔해보이는데 expo 지원 안함 ㅠ

poemyear commented 5 years ago

Context API 공식 문서 https://ko.reactjs.org/docs/context.html

poemyear commented 5 years ago

Passing Params when using Stack Navigator https://reactnavigation.org/docs/en/params.html

poemyear commented 5 years ago

Navigator Event https://reactnavigation.org/docs/en/navigation-events.html

@bakyuns @Yunmin-Ji Navigator를 통해서 화면전환을 할 때에 이벤트를 등록하기 위해서 사용. 현재는 Upload, Pick, Result 화면들을 넘겨다닐 때마다 다시 render되지 않으며, 다시 component가 마운트되는 것도 아님, 따라서 갱신을 시키기가 어려움 이를 위해서 이벤트를 등록시켜서 자동으로 갱신시키는데 (데이터를 갱신시켜, re render 유도) 사용할 수 있어보임

각 Component에서 Navigator Event를 render 코드에 포함하면 되고 테스트해본 바로는 이름으로 유추가능하듯이 blur는 현재 화면이 사라질 때 (다른화면으로 넘어갈때) focus는 현재 화면이 뿌려질 때임

각 액션에 대해서 will/did가 있고

A화면에서 B화면으로 넘어갈때에

A는 willBlur, didBlur고 B는 willFocus, didFoucs가 됨

A랑 B의 willBlur, willFocus 순서는 모르겠음 확인안해봄

poemyear commented 5 years ago

Toast https://github.com/magicismight/react-native-root-toast#readme