• useEffect는 아무 것도 반환하거나 정리 기능을 반환하지 않아야 한다. 그렇기 때문에 useEffect 에서 async를 직접 사용할 수 없고 외부의 async함수를 호출 하는 방법으로 구현해야 한다.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import List from './List';

const App = () => {
	const [input, setInput] = useState('');
	const [todos, setTodos] = useState([]);
	const [pending, setPending] = useState(false);

	const fetchInitData = async () => {
		setPending(true);
		const res = await axios.get('<https://koreanjson.com/todos>');
		setPending(false);
		setTodos(res.data);
	};

	useEffect(() => {
		setInput('');
	}, [todos]);

	useEffect(() => {
		fetchInitData();
	}, []);

	return (
		<div>
			<h1>todo 애플리케이션</h1>

			<form action="">
				<input type="text" name="" value={input} onChange={(e) => setInput(e.target.value)} />
				<button type="button" onClick={() => setTodos([...todos, input])}>할일추가</button>
			</form>

			{pending
				? 'loading...'
				: <List todos={todos} />
			}
		</div>
	);
};

export default App;

Custom hooks

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import List from './List';

const useFetch = (callback, url) => {
	const [pending, setPending] = useState(false);

	const fetchInitData = async () => {
		setPending(true);
		const res = await axios.get(url);
		setPending(false);
		callback(res.data);
	};

	useEffect(() => {
		fetchInitData();
	}, []);

	return pending;
};

const App = () => {
	const [input, setInput] = useState('');
	const [todos, setTodos] = useState([]);
	const pending = useFetch(setTodos, '<https://koreanjson.com/todos>');

	useEffect(() => {
		setInput('');
	}, [todos]);

	return (
		<div>
			<h1>todo 애플리케이션</h1>

			<form action="">
				<input type="text" name="" value={input} onChange={(e) => setInput(e.target.value)} />
				<button type="button" onClick={() => setTodos([...todos, input])}>할일추가</button>
			</form>

			{pending
				? 'loading...'
				: <List todos={todos} />
			}
		</div>
	);
};

export default App;

파일 분리

useFetch.js

import { useState, useEffect } from 'react';
import axios  from 'axios';

const useFetch = (callback, url) => {
	const [pending, setPending] = useState(false);

	const fetchInitData = async () => {
		setPending(true);
		const res = await axios.get(url);
		setPending(false);
		callback(res.data);
	};

	useEffect(() => {
		fetchInitData();
	}, []);

	return pending;
};

export default useFetch;