velopert

현재 Android Studio에서 Emulator를 추가 할 때 S - arm64 버전이 존재하긴 하지만, offline 상태가 풀리지 않는 버그가 있습니다. 지금 AVD에서 받을 수 있는 이미지는 Revision 3 인데, 이를 Revision 2로 낮추면 정상적으로 작동합니다.

참고 링크: Stackoverflow

먼저, Android Studio에서 상단 메뉴의 Android Studio - Check for updates를 눌러서 Android Studio 및 SDK를 최신으로 올리세요.

그 다음 아래 명령어를 사용하면 터미널에서 바로 SDK를 다운로드 받아서 설치할 수 있습니다.

velopert

#import <React/RCTViewManager.h>
 
@interface RCT_EXTERN_MODULE(CounterManager, RCTViewManager)

RCT_EXPORT_VIEW_PROPERTY(value, NSNumber)
RCT_EXPORT_VIEW_PROPERTY(leftButtonText, NSString)
RCT_EXPORT_VIEW_PROPERTY(rightButtonText, NSString)
RCT_EXPORT_VIEW_PROPERTY(onPressLeftButton, RCTDirectEventBlock)
RCT_EXPORT_VIEW_PROPERTY(onPressRightButton, RCTDirectEventBlock)

velopert

import { useReducer, useEffect } from 'react';

type LoadingAction = {
  type: 'LOADING';
};

type SuccessAction<T> = {
  type: 'SUCCESS';
  data: T;
};

velopert

import React, { createContext, useContext } from 'react';

const MyContext = createContext('defaultValue');

function Child() {
  const text = useContext(MyContext);
  return <div>안녕하세요? {text}</div>
}

function Parent() {

velopert

// 이 함수는 파라미터로 액션의 타입 (예: GET_USER) 과 Promise 를 만들어주는 함수를 받아옵니다.
export function createAsyncDispatcher(type, promiseFn) {
  // 성공, 실패에 대한 액션 타입 문자열을 준비합니다.
  const SUCCESS = `${type}_SUCCESS`;
  const ERROR = `${type}_ERROR`;

  // 새로운 함수를 만듭니다.
  // ...rest 를 사용하여 나머지 파라미터를 rest 배열에 담습니다.
  async function actionHandler(dispatch, ...rest) {
    dispatch({ type }); // 요청 시작됨

velopert

React Hooks 는 v16.8 에 도입된 개념으로서, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공합니다. 이에 대하여 한번 자세히 알아봅시다.

React Hook 이 2019년 2월 6일 v16.8 버전에 정식 탑재되었습니다!

프로젝트 준비

지금은 이 기능을 사용하시려면 리액트 v16.8 이상 버전을 사용하셔야 합니다. 이번 튜토리얼에서는 CRA 를 통해서 리액트 프로젝트를 생성하겠습니다.

velopert

const nodeExternals = require('webpack-node-externals');
const webpack = require('webpack');
const getClientEnvironment = require('./env');
const paths = require('./paths');

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

velopert

import {
  createAction,
  createStandardAction,
  ActionType,
} from 'typesafe-actions';
import { createReducer } from '../utils';

const SET_KEYWORD = 'header/SET_KEYWORD';

export const setKeyword = createStandardAction(SET_KEYWORD)<string>();

velopert

{
  "Object Destructure from this.props": {
    "prefix": "odprops",
    "body": ["const { ${1:value} } = this.props;"],
    "description": ""
  },
  "Re-export": {
    "prefix": "rexp",
    "body": [
      "export { default as ${1:MyComponent} } from './${1:MyComponent}';"

velopert

{
	"Object Destructure from this.props": {
		"prefix": "odprops",
		"body": [
			"const { ${1:value} } = this.props;"
		],
		"description": ""
	},
	"Re-export": {
		"prefix": "rexp",