[React Native] 코드 분석하며 마주친 애들 정리

 

 

 

1. Touchable

(1) TouchableHighlight

터치가 되었을 때 색을 어둡게 하거나, underlayColor prop을 활용해 특정 색을 활성화시킨다.

 

(2) TouchableOpacity

사용자가 터치했을 때 래핑된 뷰의 불투명도가 감소해 흐리게 표시된다.

 

(3) TouchableNativeFeedback

터치했을 때 잔물결이 일어난다.

이런 잔물결을 사용자에게 피드백을 준다는 뜻으로 사용된다.

 

(4) TouchableWithoutFeedback

터치했을 때 잔물결이 일어나지 않는다.

 

- Press Event

리액트 네이티브에서 onClick 이벤트와 가장 비슷한 이벤트는 press 이벤트다.

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';

const EventButton = () => {
  const _onPressIn = () => console.log('Press In !!!\n');
  const _onPressOut = () => console.log('Press Out !!!\n');
  const _onPress = () => console.log('Press !!!\n');
  const _onLongPress = () => console.log('Long Press!!!\n');
  return (
    <TouchableOpacity
      onPressIn={_onPressIn}
      onLongPress={_onLongPress}
      onPressOut={_onPressOut}
      onPress={_onPress}
    >
      <Text style={{ color: 'white', fontSize: 24 }}>Press</Text>
    </TouchableOpacity>
  );
};

export default EventButton;

• onPressIn : 터치가 시작될 때
• onPressOut : 터치가 해제될 때
• onPress : 터치가 해제될 때 onPressOut 이후 호출
• onLongPress : 터치가 일정 시간 이상 지속되면

 

 

 

2. AppRegistry

/* 기본 구조 */
AppRegistry.registerComponent(앱이름, () => 시작컴포넌트)

/* index.js */
import {AppRegistry} from 'react-native';
import App from './App';

AppRegistry.registerComponent(appName, () => App);

AppRegistry 는 App 의 루트 Component 를 지정하여, 애플리케이션 시작을 등록하는 API 이다.

이를 통해 시작하는 컴포넌트를 찾는다.

 

 

 

3. export default connect

1. connect 함수에는 mapStateToProps, mapDispatchToProps 를 인자로 넣어준다.

2. mapStateToProps 는 리덕스 스토어의 상태를 조회해 어떤 것들을 props 로 넣어줄지 정의한다.

    - 현재 리덕스 상태를 파라미터로 받아온다.

3. mapDispatchToProps 는 액션을 디스패치하는 함수를 만들어 props 로 넣어준다.

    - dispatch 를 파라미터로 받아온다.

import React from 'react';
import { connect } from 'react-redux';
import Counter from '../components/Counter';
import { increase, decrease, setDiff } from '../modules/counter';

function CounterContainer({ number, diff, increase, decrease, setDiff }) {
  return (
    <Counter
      // 상태와
      number={number}
      diff={diff}
      // 액션을 디스패치 하는 함수들을 props로 넣어줍니다.
      onIncrease={increase}
      onDecrease={decrease}
      onSetDiff={setDiff}
    />
  );
}

// mapStateToProps 는 리덕스 스토어의 상태를 조회해서 어떤 것들을 props 로 넣어줄지 정의합니다.
// 현재 리덕스 상태를 파라미터로 받아옵니다.
const mapStateToProps = state => ({
  number: state.counter.number,
  diff: state.counter.diff
});

// mapDispatchToProps가 함수가 아니라 객체면
// bindActionCreators 를 connect 에서 대신 해줍니다.
const mapDispatchToProps = {
  increase,
  decrease,
  setDiff
};

// connect 함수에는 mapStateToProps, mapDispatchToProps 를 인자로 넣어주세요.
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(CounterContainer);

/* 위 코드는 다음과 동일합니다.
  const enhance = connect(mapStateToProps, mapDispatchToProps);
  export defualt enhance(CounterContainer);
*/

 

 

 

4. navigator.userAgent

현 상태 가져오는 아이

• navigator : 브라우저의 정보를 제공해주는 객체
• userAgent : 클라이언트가 사용하는 브라우저의 종류

 

 

 

5. Object

자바스크립트의 거의 모든 것은 객체라고 생각하면 된다.

객체 = '{key : value}' 형태의 프로퍼티들을 저장하는 컨테이너 !

우리는 잘 정리된 객체를 통해 수없이 다양한 valus들을 key를 인덱스 삼아 빠르고 정확하게 찾을 수 있다.

중괄호만 보면 . . 객체라는 것을 인지하자 ! !

만들어진 객체의 value 값을 불러올 때에는 온점(.)과 대괄호([])를 사용하면 된다.

 

이 Object 에 관련된 내용은 게시글을 하나 쓰려다가 . .

너무너무 잘 정리하신 글을 봐서 여기에 넣게 되었다.  💌 블로그 글 보기

• Object.keys() = 객체의 모든 key 들을 배열로 보여줌
• Object.values() = value 들을 배열로 보여줌
• Object.assign(target, source) = 인자로 받은 객체들을 합쳐줌

const Data = {
	car: "Pontiac",
	animal: "Egyptian vulture",
	color: "Green"
}

Data.car // Pontiac

 

 

 

6. 점점점 ...

이 아이들은 비구조화 할당 문법 이라고 한다 !

'비구조화 할당 (destructuring assignment) 구문' 은 배열이나 객체의 속성을 해체하여

그 값을 개별 변수에 담을 수 있게 하는 자바스크립트 표현식이다.

 

간단하게 말해, 배열 [] 혹은 객체 {} 안의 값을 편하게 꺼내 쓸 수 있는 문법이다.

사용법과 상세한 내용은 💌 블로그 내용 을 참고하자

 

 

 

---

 

 

 

리액트와 리액트 네이티브에 대해서

조금씩 배우고 있는 이상 이 게시물의 길이는 한도 끝도 없이 늘어날 것으로

예상 . . 열심히 달려보겠습니다 . . 🔥

 

 

 

 

Θ 참고

http://blog.wjhong.pe.kr/reactnative/2017/02/08/ReactNative-2-Basic/ (기초 하나하나 자세한 설명)

http://suhanlee.github.io/2017/react-native-guide-2.html (적당한 기초글)

https://ko.reactjs.org/docs/hello-world.html (React 공식문서)

https://velog.io/@easttwave/ReactNative-Component (React Native 컴포넌트)

Hello World – React