17 앱제작 준비

1. 시작파일

파일다운로드 파일활용방법 만약 이전 파일이 없을 경우 아래의 파일을 다운로드 하여 진행한다 시작 파일

#2. App 컴포넌트 비우기

./src/App.js 컴포넌트를 깨끗하게 정리하자. App.js

1
function App() {
2
 return <div className='App'></div>;
3
}
4

5
export default App;

1 2 3 4 5

index.js 수정 index.js

1
import React from 'react';
2
import ReactDOM from 'reactdom/client';
3
import './index.css';
4
import App from './App';
5

6
const root = ReactDOM.createRoot(document.getElementById('root'));
7
root.render(
8
 <>
9
   <App />
10
 </>
11
);

1 2 3 4 5 6 7 8 9 10 11

#3. 데이터 로딩 상태 표시해주기

loading 여부에 따라 App 컴포넌트에 그려야할 내용이 변경되므로 useState Hook을 활용한다 App.js

1
import { useState } from 'react';
2
function App() {
3
  const [loading, setLoading] = useState(true);
4
  return <div className='App'></div>;
5
}
6

7
export default App;

1 2 3 4 5 6 7

#4. 조건부렌더링

loading 변수의 값이 true 일경우 app 컴포넌트에 로딩중입니다를 렌더링한다 App.js

1
import { useState } from 'react';
2
function App() {
3
  const [loading, setLoading] = useState(true);
4
  return <div className='App'>{loading && <h1>로딩중입니다...</h1>}</div>;
5
}
6
export default App;

1 2 3 4 5 6

loading 의 값이 true 이므로 로딩중입니다 렌더링된다

#5. 로딩 구현하기

useEffect 훅을 사용하여 0.5초 후 loading 변수의 값을 변경하여 컴포넌트의 내용을 리렌더시킨다. 이제 0.5초후 앱의 타이틀이 출력된다. App.js

1
import { useState, useEffect } from 'react';
2
function App() {
3
  const [loading, setLoading] = useState(true);
4
  useEffect(() => {
5
    setTimeout(() => {
6
      setLoading(false);
7
    }, 500);
8
  }, []);
9
  return <div className='App'>{loading ? <h1>로딩중입니다...</h1> : <h1> 도레미레시피</h1>}</div>;
10
}
11
export default App;

1 2 3 4 5 6 7 8 9 10 11

#6. 데이터를 어디에 저장할까?

useEffect() 훅에 주석을 작성해보자. 바로 그 자리에 레시피 데이터를 로딩할 것이다.

```js # App.js
import \{ useState, useEffect \} from 'react';
function App() \{
  const [loading, setLoading] = useState(true);
  useEffect(() => \{
    //레시피데이터로딩
    setTimeout(() => \{
      setLoading(false);
    \}, 500);
  \}, []);
  return <div className='App'>\{loading ? `<h1>`로딩중입니다...`</h1>` : `<h1>` 도레미레시피`</h1>`\}`</div>`;
\}
export default App;

1
1. 로딩된 데이터는 state에 저장한다
2
  레시피데이터를 로딩한 다음 state에 저장하려면 어떻게 해야 할까?
3
  로딩된 레시피 데이터를 저장할 수 있도록 data 만들자. 자료형은 당연히 배열이고, 배열내 객체로 데이터가 들어올 것이다.
4
  App.js
5

6
```javascript
7
import { useState, useEffect } from 'react';
8
function App() {
9
  const [loading, setLoading] = useState({ state: true, data: [] });
10
  console.log(loading);
11
  useEffect(() => {
12
    //레시피데이터로딩
13
    setTimeout(() => {
14
      setLoading(false);
15
    }, 500);
16
  }, []);
17
  return <div className='App'>{loading ? <h1>로딩중입니다...</h1> : <h1> 도레미레시피</h1>}</div>;
18
}
19

20
export default App;

1 2 3 4 5 6 7 8 9 10 11 12 13 14

#7. 여기까지 깃허브에 올리기

bash

git add .
git commit m "06 프로젝트 워밍업"
git push origin main

1 2 3

#8. 완료파일

완료 파일