Taehoon Koo's Blog

componentWillMount is deprecated.

React Native를 업그레이드 했더니, componentWillMount등이 deprecated 되었다는 메세지가 떴습니다.

공식 홈페이지에서 내용을 살펴 보니, 이번에 deprecated 된 lifecycle method목록은 다음과 같습니다. 

1. componentWillMount

2. componentWillReceiveProps

3. componentWillUpdate

공식 문서에 따르면 UNSAFE_componentWillMount로 이름을 바꿔서 사용할수 있다고 하지만, 16.x버전까지만 사용이 가능하며, 17버전 부터는 완전히 사용이 불가능하다고 합니다. 즉 UNSAFE_보다는 가이드 되는 Method들로 변경해주는것이 좋습니다.

Simulator 상에서 해당 Message를 클릭하면, 대응해서 사용할 수 있는 method를 안내 해주며, 각각 Method에 대응되는 Method는 아래와 같습니다.

1. componentWillMount -> componentDidMount

2. componentWillReceiveProps -> getDerivedStateFromProps

3. componentWillUpdate -> componentDidupdate

React Native 공식 문서 : 

Redux Thunk? https://github.com/gaearon/redux-thunk

Redux Thunk는 Redux Action Creator를 비동기(Async)으로 사용하게 해주는 Redux의 Middleware다.

Redux Action Creator를 생성할때는 아래와 같은 규칙을 반듯이 지켜야 한다.

Redux Thunk를 사용하면 여기에 한가지 규칙을 더 추가하여 Action creator를 작성 할 수 있다.

즉, Redux Thunk를 이용하면, action creator가 호출될때, API 호출등의 비동기적인 작업을 수행하고, 그 결과를 dispatch를 통해 전달 할수 있게 된다.

1. Redux Thunk 설치

npm install --save redux-thunk

2. Redux Thunk Middleware 적용하기.

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

3.Redux Thunk의 사용 

function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      // Yay! Can invoke sync or async actions with `dispatch`
      dispatch(increment());
    }, 1000);
  };
}