[React] Mock data 활용법 2

저번에는 json-server를 이용한 mock data였다면

이번엔 엄청나게 간단하게 js로 만들어서 불러와서 사용해주는 방법이다.

 

차이가 있다면 json-server를 이용해서 데이터를 만들어주게 되면

fetch나 axios를 사용해서 직접 불러서 뿌려줄 수가 있겠지만

다른 작업을 하기 위해 필요한 데이터만 부르기에는 이 방법이 더 간단한 것 같아서

시작해보았다. 

 

예를들어 initailData를 만들어 준 후에

const initailData = {
  tasks:{
    'task-1': {id: 'task-1', content: "하나둘"},
    'task-2': {id: 'task-2', content: "셋넷"},
    'task-3': {id: 'task-3', content: "다섯"},
    'task-4': {id: 'task-4', content: "여섯"},
    'task-5': {id: 'task-5', content: "일곱여덟"},
  },
  columns: {
    'column-1': {
      id: 'column-1',
      title: 'To do',
      taskIds: ['task-1', 'task-2', 'task-3', 'task-4']
    }
  },
  columnOrder:['column-1']
};

export default initailData;

필요한 곳에서

  const [state, setState] = useState(initailData);

import시킨후에 이렇게 넣어주기만 하면 끝 !

 

json-server를 사용했을 때 실행을 계속 시켜놔야해서 

조금 부담이 있었는데

이 방법을 사용하니 너무 간단해서 

상황에 맞게 사용하는게 달라야 겠지만 

우선 지금 하고 있는 일은 저방법으로 다 바꿔버렸다.