KimSangLab

github.com/indiespirit/react-native-chart-kit

프로젝트 진행 중 그래프 출력을 해야하는 로직이 있어 react-native-chart-kit 을 사용함. 

여러가지 그래프 출력 함수를 제공하지만 가장 기본인 LineChart를 사용하였으며, 그래프 작성시 필요한 값은  datasets->data 배열에 저장해둠.

이 data 배열을 동적으로 변경해야하는 경우 아래 코드와 같이 이전 값을 복사 한 뒤 data 배열 값 업데이트 후 setState 함수를 통해 변경된 값을 적용하면 화면이 랜더링 되면서 변경된 값으로 새로운 그래프를 출력함. 

단말(안드로이드) <-> 서버 통신을 통해 인증 및 데이터를 송수신 하는 App 을 개발하던 중 특정 단말기(안드로이드)에서 통신이 안되는 문제가 발생하여 원인을 찾던중 안드로이드 9.0 파이(Pie)로 업데이트 되면서 API 주소, 이미지 주소 등 네트워크 경로가 https 가 아닌 http로 되어 있기 때문에 발생하는 문제로 확인됨. 

안드로이드 9.0 파이는 https 를 사용하도록 강제하며 주소가 http인 경우 통신이 안되는 문제가 발생하여 해결 방법을 정리 하고자 함. 

해결 방법 1 

 => App 내에서 통신에 사용되는 주소를 http -> https 로 변경한다. 

해결 방법 2

 => res/xml/network_security_config.xml 파일을 생성하고 하단 내용을 기입한다. 

  => AndroidManifest.xml 파일을 아래 처럼 변경한다. 

해결 방법 3

 => AndroidManifest.xml 파일에 usesCleartextTraffic 관련 옵션을 추가 한다. 

해결 방법은 대략 3가지 정도가 있는것으로 확인 했으며 해당 프로젝트는 3번 방법을 통해 통신이 정상 작동 하는것을 확인 했지만 1번 방법이 가장 좋을것 같아 추후에 API 주소를 변경하고자 함. 

출처 : https://stackoverflow.com/questions/45940861/android-8-cleartext-http-traffic-not-permitted

LifeCycle API는 컴포넌트가 브라우저에 나타날때, 사라질때, 업데이트 될때 호출되는 API를 말한다. 

1. constructor

  => 컴포넌트가 새로 만들어 질때 호출되는 함수 

2. componentWillMount

  => 컴포넌트가 화면에 출력되기 직전에 호출되는 함수. v16.3 에서는 해당 API가 deprecated 됨.

3. componentDidMount

  => 컴포넌트가 화면에 출력될때 호출되는 함수. 외부 라이브러리 연동 및 데이터 요청등에 주로 사용.

4. componentWillReceiveProps 

  => 새로운 props를 받게 되었을때 호출. 주로 state -> props에 따라 변해야 하는 로직을 작성함. 새로 받게될 props는 nextProps로 조회 가능 하며 this.props는 변경전 값임. 

5. componentWillUnmount

  => 등록한 이벤트 제거 및 사용한 라이브러리 dispose등 호출하는데 이용함.

1. props 

  => 부모 컴포넌트가 자식 컴포넌트에게 주는 값. 자식 컴포넌트는 받아온 props 값 수정 불가 

  => 받아온 값은 this. 키워드를 통해 확인 가능함.

  => static defaultProps 를 통해 기본 props 설정 가능 

2. state 

  => 컴포넌트 내부에서 선언하며 내부에서 값 변경 가능함. 

  => state = { 변수 : 값} 형태로 선언함.

  => state 값을 변경하고 싶은 경우 this.setState 를 사용. 해당 함수를 거치면 컴포넌트가 렌더링 되도록 설계 되어 있음.

리액트 네이티브가 지원하는 모든 UI 요소를 살펴볼수 있다.

꼭 분석 해볼것!!