\ub9ac\uc561\ud2b8\ub294 \ud604\ub300 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac00\uc7a5 \uc778\uae30 \uc788\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. \uadf8 \uc774\uc720\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uae30\ubc18\uc758 \uc544\ud0a4\ud14d\ucc98, \uc7ac\uc0ac\uc6a9\uc131, \uadf8\ub9ac\uace0 \ubcf5\uc7a1\ud55c UI\ub97c \uc27d\uac8c \uad00\ub9ac\ud560 \uc218 \uc788\ub294 \ubc29\ubc95 \ub54c\ubb38\uc785\ub2c8\ub2e4. \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\uc758 Context API\ub97c \ud65c\uc6a9\ud558\uc5ec \ucef4\ud3ec\ub10c\ud2b8 \ud2b8\ub9ac\uc5d0 \ub370\uc774\ud130\ub97c \uacf5\uae09\ud558\ub294 \ubc29\ubc95\uacfc \uc774\ub97c \ud1b5\ud574 \uac04\ub2e8\ud55c To Do \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9ac\ud329\ud1a0\ub9c1\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\ub9ac\uc561\ud2b8\ub294 UI\ub97c \uad6c\uc131\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc9d1\ud569\uc785\ub2c8\ub2e4. \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc0c1\ud0dc(state)\uc640 \uc18d\uc131(props)\uc744 \uac00\uc9c0\uba70, \uc774 \ub458\uc744 \ud1b5\ud574 UI\uac00 \uc5b4\ub5bb\uac8c \ub80c\ub354\ub9c1\ub420\uc9c0\ub97c \uacb0\uc815\ud569\ub2c8\ub2e4.<\/p>\n
\uc0c1\ud0dc\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc758 \ub0b4\ubd80 \ub370\uc774\ud130\ub97c \ub098\ud0c0\ub0b4\uba70, \uc0ac\uc6a9\uc790\uc758 \uc785\ub825\uc774\ub098 \ub124\ud2b8\uc6cc\ud06c \uc694\uccad\uc5d0 \ub530\ub77c \ubcc0\uacbd\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ubc18\uba74, \uc18d\uc131\uc740 \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\ub85c\ubd80\ud130 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub85c \uc804\ub2ec\ub418\ub294 \ub370\uc774\ud130\uc785\ub2c8\ub2e4.<\/p>\n
\ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \uc5ec\ub7ec \uac1c\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\ub85c \uad6c\uc131\ub41c \ud2b8\ub9ac \ud615\ud0dc\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4. \uc774 \ud2b8\ub9ac \uad6c\uc870\ub97c \ud1b5\ud574 \ub370\uc774\ud130\uac00 \ubd80\ubaa8\uc5d0\uc11c \uc790\uc2dd\uc73c\ub85c \ud750\ub974\ub294 \uac83\uc744 \uad00\ub9ac\ud558\uac8c \ub429\ub2c8\ub2e4.<\/p>\n
Context API\ub294 \ub9ac\uc561\ud2b8\uc5d0\uc11c \ucef4\ud3ec\ub10c\ud2b8 \ud2b8\ub9ac\uc758 \uae4a\uc740 \uacf3\uc5d0 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub370\uc774\ud130\ub97c \uc804\ub2ec\ud558\uae30 \uc704\ud574 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \uc5ec\ub7ec \ub808\ubca8\uc744 \uac70\uce58\uc9c0 \uc54a\uace0\ub3c4 \ub370\uc774\ud130\ub97c \uacf5\uae09\ud560 \uc218 \uc788\ub3c4\ub85d \ub9cc\ub4e4\uc5b4\uc838 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc18d\uc131(props) \uc804\ud30c\uc758 \ubcf5\uc7a1\uc131\uc744 \uc904\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
Context\ub97c \ub9cc\ub4e4\uae30 \uc704\ud574\uc11c\ub294 \uba3c\uc800 React\uc758 Context\uc758 Provider \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud558\uc704 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub370\uc774\ud130\ub97c \uc804\ub2ec\ud569\ub2c8\ub2e4. Provider\ub294 \ubaa8\ub4e0 \ud558\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc811\uadfc\ud560 \uc218 \uc788\ub294 \ub370\uc774\ud130\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n \ud558\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c Context\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 \uc774\uc81c Context API\ub97c \ud65c\uc6a9\ud558\uc5ec \uac04\ub2e8\ud55c To Do \uc571\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \uba3c\uc800 \uae30\ubcf8\uc801\uc778 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\uc870\ub97c \uc124\uc815\ud569\ub2c8\ub2e4.<\/p>\n To Do \uc571\uc740 \ub2e4\uc74c\uacfc \uac19\uc740 \ucef4\ud3ec\ub10c\ud2b8\ub85c \uad6c\uc131\ub429\ub2c8\ub2e4.<\/p>\n \uba3c\uc800, \uadf8\ub9ac\uace0 \ucd5c\uc885\uc801\uc73c\ub85c \uc0c1\ud0dc \uad00\ub9ac\ub294 \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc911\uc694\ud55c \ubd80\ubd84\uc785\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ub098\uc911\uc5d0 \ub370\uc774\ud130\uc758 \ud750\ub984\uacfc \uc5f0\uad00\uc131\uc744 \ub354\uc6b1 \uba85\ud655\ud558\uac8c \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Context API\ub97c \uc0ac\uc6a9\ud558\uba74 \ud558\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0c1\ud0dc\ub97c \uc9c1\uc811 \uc811\uadfc\ud560 \uc218 \uc788\uc5b4 \ub354\uc6b1 \ud6a8\uc728\uc801\uc73c\ub85c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n \uc0c1\ud0dc \uad00\ub9ac\ub97c \uc704\ud574 \uc5ec\ub7ec \uac00\uc9c0 \ud328\ud134\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Context API\uc640 \ud568\uaed8 \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0, \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc11c\ube0c\uc2a4\ud06c\ub77c\uc774\ube0c \ud558\ub3c4\ub85d \uc124\uacc4\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \uc7ac\ub80c\ub354\ub9c1\uc744 \ucd5c\uc18c\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n \ub9ac\ud329\ud1a0\ub9c1\uc744 \ud1b5\ud574 \ucd94\uac00\uc801\uc778 \uae30\ub2a5\uc744 \uc548\uc804\ud558\uac8c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4, To Do \ud56d\ubaa9\uc758 \uc644\ub8cc \uc5ec\ubd80\ub97c \ucc98\ub9ac\ud558\ub294 \ub85c\uc9c1\uc744 \ucd94\uac00\ud574 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n \uc644\ub8cc\ub41c To Do \ud56d\ubaa9\uc744 \uc2dc\uac01\uc801\uc73c\ub85c \ub098\ud0c0\ub0b4\uae30 \uc704\ud574 \uc774\ubc88 \uac15\uc88c\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\uc758 Context API\ub97c \ud65c\uc6a9\ud558\uc5ec \ucef4\ud3ec\ub10c\ud2b8 \ud2b8\ub9ac\uc5d0 \ub370\uc774\ud130\ub97c \uacf5\uae09\ud558\uace0 To Do \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9ac\ud329\ud1a0\ub9c1\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \ubc30\uc6e0\uc2b5\ub2c8\ub2e4. Context\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uac04\uc758 \ub370\uc774\ud130 \uacf5\uc720\ub97c \uac04\ud3b8\ud558\uac8c \ud558\uc5ec \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uad6c\uc870\ub97c \ubcf4\ub2e4 \uae54\ub054\ud558\uac8c \ub9cc\ub4e4\uc5b4 \uc90d\ub2c8\ub2e4.<\/p>\n \ub9ac\uc561\ud2b8\ub97c \ud65c\uc6a9\ud55c \uc0c1\ud0dc \uad00\ub9ac\uc640 \ub370\uc774\ud130 \ud750\ub984\uc758 \uc774\ud574\ub294 \uc55e\uc73c\ub85c \ubcf5\uc7a1\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \ud070 \ub3c4\uc6c0\uc774 \ub420 \uac83\uc785\ub2c8\ub2e4. \uc774\uc81c \uc5ec\ub7ec\ubd84\ub3c4 \uc9c1\uc811 Context API\ub97c \ud65c\uc6a9\ud558\uc5ec \ub2e4\uc591\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4\uc5b4 \ubcf4\uc2dc\uae30\ub97c \uad8c\uc7a5\ud569\ub2c8\ub2e4. \uac10\uc0ac\ud569\ub2c8\ub2e4!<\/p>\n <\/body><\/p>\n","protected":false},"excerpt":{"rendered":"createContext<\/code> \ud568\uc218\ub97c \uc0ac\uc6a9\ud574\uc57c \ud569\ub2c8\ub2e4.<\/p>\nimport React, { createContext, useContext, useState } from 'react';\n\nconst MyContext = createContext(); \/\/ Context \uc0dd\uc131<\/code><\/pre>\n2.2 Provider\uc640 Consumer<\/h3>\n
<MyContext.Provider value={\/* context value *\/}>\n {\/* children *\/}\n<\/MyContext.Provider><\/code><\/pre>\n2.3 Context \uc0ac\uc6a9\ud558\uae30<\/h3>\n
useContext<\/code> \ud6c5\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uac00\uc838\uc635\ub2c8\ub2e4.<\/p>\nconst value = useContext(MyContext); \/\/ Context \uc0ac\uc6a9<\/code><\/pre>\n3. To Do \uc571 \uad6c\uc870 \uc124\uc815\ud558\uae30<\/h2>\n
3.1 \uae30\ubcf8 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\uc870<\/h3>\n
\n
3.2 \uc571 \ucf54\ub4dc \uc791\uc131\ud558\uae30<\/h3>\n
TodoProvider<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc791\uc131\ud558\uc5ec To Do \ub9ac\uc2a4\ud2b8\uc758 \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud569\ub2c8\ub2e4.<\/p>\nconst TodoProvider = ({ children }) => {\n const [todos, setTodos] = useState([]);\n\n const addTodo = (todo) => {\n setTodos([...todos, todo]);\n };\n\n const removeTodo = (id) => {\n setTodos(todos.filter(todo => todo.id !== id));\n };\n\n return (\n <MyContext.Provider value={{ todos, addTodo, removeTodo }}>\n {children}\n <\/MyContext.Provider>\n );\n};<\/code><\/pre>\nTodoList<\/code>\uc640 AddTodo<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub97c \uac01\uac01 \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\nconst TodoList = () => {\n const { todos, removeTodo } = useContext(MyContext);\n\n return (\n <ul>\n {todos.map(todo => (\n <TodoItem key={todo.id} todo={todo} onRemove={removeTodo} \/>\n ))}<\/ul>\n );\n};\n\nconst AddTodo = () => {\n const { addTodo } = useContext(MyContext);\n const [inputValue, setInputValue] = useState('');\n\n const handleSubmit = (e) => {\n e.preventDefault();\n if (!inputValue) return;\n \n addTodo({ id: Date.now(), text: inputValue });\n setInputValue('');\n };\n\n return (\n <form onSubmit={handleSubmit}>\n <input \n type=\"text\" \n value={inputValue} \n onChange={(e) => setInputValue(e.target.value)} \n placeholder=\"\uc0c8 \ud560 \uc77c \uc785\ub825\" \n \/>\n <button type=\"submit\">\ucd94\uac00\ud558\uae30<\/button>\n <\/form>\n );\n};<\/code><\/pre>\n3.3 \ucd5c\uc885 \uc571 \uad6c\uc870<\/h3>\n
App<\/code> \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c TodoProvider<\/code>\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub2e4\ub978 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uac10\uc2f8\uc90d\ub2c8\ub2e4.<\/p>\nconst App = () => {\n return (\n <TodoProvider>\n <h1>\ud560 \uc77c \ub9ac\uc2a4\ud2b8<\/h1>\n <AddTodo \/>\n <TodoList \/>\n <\/TodoProvider>\n );\n};<\/code><\/pre>\n4. \uc0c1\ud0dc \uad00\ub9ac \ubc0f \ub9ac\ud329\ud1a0\ub9c1<\/h2>\n
4.1 \uc0c1\ud0dc \uad00\ub9ac \ud328\ud134<\/h3>\n
4.2 \ub9ac\ud329\ud1a0\ub9c1 \uc608\uc2dc<\/h3>\n
const toggleTodo = (id) => {\n setTodos(todos.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo));\n};<\/code><\/pre>\n4.3 \uc644\ub8cc\ub41c To Do \ud56d\ubaa9 \uc2dc\uac01\ud654\ud558\uae30<\/h3>\n
TodoItem<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc218\uc815\ud569\ub2c8\ub2e4.<\/p>\nconst TodoItem = ({ todo, onRemove }) => {\n return (\n <li style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>\n {todo.text}\n <button onClick={() => onRemove(todo.id)}>\uc0ad\uc81c<\/button>\n <\/li>\n );\n};<\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n