간단한 Context API를 헤더에 적용

App.js

import React, { useState, useEffect, createContext } from 'react';
import useFetch from './useFetch';
import List from './List';
import Header from './Header';
import Form from "./Form";

export const TodoContext = createContext();

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

	const pending = useFetch(setTodos, '<https://koreanjson.com/todos>');

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

	const changeTodoCompleted = (id) => {
		const newTodos = todos.map(todo => todo.id === id ? {...todo, completed: !todo.completed} : todo);
		setTodos(newTodos);
	};

	return (
		<TodoContext.Provider value={{todos}}>
			<div>
				<Header />
				<Form input={input} setInput={setInput} todos={todos} setTodos={setTodos} />
				{pending
					? 'loading...'
					: <List todos={todos} changeTodoCompleted={changeTodoCompleted} />
				}
			</div>
		</TodoContext.Provider>
	);
};

export default App;

Header.js

import React from 'react';
import { TodoContext } from "./App";

const Header = () => {
	return (
		<TodoContext.Consumer>
			{({ todos }) => (
				<div>
					<h1>hello todo application</h1>
					<div>해야할 일 : {todos.filter(todo => !todo.completed).length}개가 있습니다.</div>
				</div>
			)}
		</TodoContext.Consumer>
	);
};

export default Header;

UseContext 사용

Provider 쪽은 같고 Consumer쪽이 간단해 진다.

import React, { useContext } from 'react';
import { TodoContext } from "./App";

const Header = () => {
	const { todos } = useContext(TodoContext);

	return (
		<div>
			<h1>hello todo application</h1>
			<div>해야할 일 : {todos.filter(todo => !todo.completed).length}개가 있습니다.</div>
		</div>
	);
};

export default Header;