.nvmrc를 통해 무엇을 할 수 있는가? 


.nvmrc는 NVM(node version manager)의 개별 프로젝트를 위한 설정 파일입니다.

.nvmrc를 통해 특정 프로젝트에 사용되는 버전을 기술 할 수 있으면 NVM을 이용해 프로젝트마다 상이할 수 있는 node version을 빠르게 전환 하도록 도와 줍니다.


.nvmrc 사용법 


1. .nvmrc 파일 생성 

echo "8.9.0" > .nvmrc 


*8.9.0 text는 사용하시는 버전으로 대치하여 사용하시면 됩니다.


2. 기술된 .node version 사용하기 


nvm use


+ 만약 기술된 node version이 설치가 되어 있지 않다면, 아래의 명령어를 통해 설치 할 수 있습니다. 자동으로 use 명령어가 호출 됩니다.


nvm install 




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 공식 문서 : 


https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html


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


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


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


Action creator는 Function 이어야 한다

 Action creator는 action(type property를 가지는 object)을 Return 해야한다.


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


  Action creator는 Function 이어야 한다

  Action creator는 action(type property를 가지는 object)을 Return 해야한다.

 + Action Creator는 함수를 Return 할 수 있으며 'dispatch' argument와 함께 호출된다.


즉, 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);
  };
}


+ Recent posts