앱제작 준비

앱제작 준비

유형
실습문서
주제

레시피앱제작

순번
6
태그
설명

1. 시작파일

파일다운로드

파일활용방법

만약 이전 파일이 없을 경우 아래의 파일을 다운로드 하여 진행한다

시작 파일

#2. App 컴포넌트 비우기

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

    function App() {
     return <div className='App'></div>;
    }
    
    export default App;
    

    1

    2

    3

    4

    5

  3. index.js 수정
  4. index.js

    import React from 'react';
    import ReactDOM from 'reactdom/client';
    import './index.css';
    import App from './App';
    
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(
     <>
     	<App />
     </>
    );
    

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

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

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

    import { useState } from 'react';
    function App() {
    	const [loading, setLoading] = useState(true);
    	return <div className='App'></div>;
    }
    
    export default App;
    

    1

    2

    3

    4

    5

    6

    7

#4. 조건부렌더링

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

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

      1

      2

      3

      4

      5

      6

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

#5. 로딩 구현하기

  1. useEffect 훅을 사용하여 0.5초 후 loading 변수의 값을 변경하여 컴포넌트의 내용을 리렌더시킨다. 이제 0.5초후 앱의 타이틀이 출력된다.
  2. 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

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

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

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

    ```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;
    ```
    
  3. 로딩된 데이터는 state에 저장한다
  4. 레시피데이터를 로딩한 다음 state에 저장하려면 어떻게 해야 할까?

    로딩된 레시피 데이터를 저장할 수 있도록 data 만들자. 자료형은 당연히 배열이고, 배열내 객체로 데이터가 들어올 것이다.

    App.js

    import { useState, useEffect } from 'react';
    function App() {
    	const [loading, setLoading] = useState({ state: true, data: [] });
    	console.log(loading);
    	useEffect(() => {
    		//레시피데이터로딩
    		setTimeout(() => {
    			setLoading(false);
    		}, 500);
    	}, []);
    	return <div className='App'>{loading ? <h1>로딩중입니다...</h1> : <h1> 도레미레시피</h1>}</div>;
    }
    
    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. 완료파일

완료 파일