{"id":68,"date":"2026-06-26T13:32:24","date_gmt":"2026-06-26T13:32:24","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=68"},"modified":"2026-06-26T13:32:24","modified_gmt":"2026-06-26T13:32:24","slug":"usecontext%eb%a1%9c-%ec%a0%84%ec%97%ad-%ec%83%81%ed%83%9c-%ea%b4%80%eb%a6%ac","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=68","title":{"rendered":"useContext\ub85c \uc804\uc5ed \uc0c1\ud0dc \uad00\ub9ac"},"content":{"rendered":"

1. useContext\ub85c \uc804\uc5ed \uc0c1\ud0dc \uad00\ub9ac<\/h1>\n

1.1. Context\uac00 \ud544\uc694\ud55c \uc774\uc720<\/h2>\n

\ub9ac\uc561\ud2b8\uc5d0\uc11c \ub370\uc774\ud130\ub294 \ubcf4\ud1b5 \ubd80\ubaa8 \u2192 \uc790\uc2dd \ubc29\ud5a5\uc73c\ub85c Props<\/strong>\ub97c \ud1b5\ud574 \uc804\ub2ec\ud55c\ub2e4.
\n\uadf8\ub7f0\ub370 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uae4a\uac8c \uc911\ucca9\ub418\uc5b4 \uc788\uc73c\uba74, \uc911\uac04\uc5d0 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc774 \uc9c1\uc811 \uc4f0\uc9c0\ub3c4 \uc54a\ub294 \ub370\uc774\ud130<\/strong>\ub97c \uacc4\uc18d \ubc1b\uc544\uc11c \uc544\ub798\ub85c \ub118\uaca8\uc918\uc57c \ud55c\ub2e4.
\n\uc774 \ubb38\uc81c\ub97c Prop Drilling(\ud504\ub86d \ub4dc\ub9b4\ub9c1)<\/strong> \uc774\ub77c\uace0 \ud55c\ub2e4.<\/p>\n

Context<\/strong>\ub97c \uc0ac\uc6a9\ud558\uba74 \uc911\uac04 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uac70\uce58\uc9c0 \uc54a\uace0, \ud544\uc694\ud55c \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc9c1\uc811<\/strong> \ub370\uc774\ud130\ub97c \uaebc\ub0b4 \uc4f8 \uc218 \uc788\ub2e4.<\/p>\n

1.1.1. Props \uc804\ub2ec\uc758 \ubb38\uc81c\uc810 (Prop Drilling)<\/h3>\n

user<\/code> \ub370\uc774\ud130\uac00 App<\/code>\uc5d0 \uc788\ub294\ub370, \uc2e4\uc81c\ub85c \uc0ac\uc6a9\ud558\ub294 \uacf3\uc740 \ub9e8 \uc544\ub798\uc758 Profile<\/code>\uc774\ub2e4.
\n\uc911\uac04\uc758 Page<\/code>, Header<\/code>\ub294 \ub370\uc774\ud130\ub97c \uc4f0\uc9c0 \uc54a\uc9c0\ub9cc \uadf8\ub0e5 \uc544\ub798\ub85c \uc804\ub2ec<\/strong>\ud558\ub294 \uc5ed\ud560\ub9cc \ud55c\ub2e4.<\/p>\n

\/\/ user\ub97c Profile\uae4c\uc9c0 \ubcf4\ub0b4\ub824\uba74 \ubaa8\ub4e0 \uc911\uac04 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uac70\uccd0\uc57c \ud568\nfunction App() {\n  const [user, setUser] = useState('\uae40\ucca0\uc218');\n  return <Page user={user} \/>;         \/\/ Page\uc5d0 \ub118\uae40\n}\n\nfunction Page({ user }) {\n  return <Header user={user} \/>;       \/\/ Header\uc5d0 \ub118\uae40 (Page\ub294 user\ub97c \uc4f0\uc9c0 \uc54a\uc74c)\n}\n\nfunction Header({ user }) {\n  return <Profile user={user} \/>;      \/\/ Profile\uc5d0 \ub118\uae40 (Header\ub3c4 user\ub97c \uc4f0\uc9c0 \uc54a\uc74c)\n}\n\nfunction Profile({ user }) {\n  return <div>{user}<\/div>;            \/\/ \uc5ec\uae30\uc11c\ub9cc \uc2e4\uc81c\ub85c \uc0ac\uc6a9\n}\n<\/code><\/pre>\n
\ucef4\ud3ec\ub10c\ud2b8\uac00 10\ub2e8\uacc4\ub77c\uba74 10\ubc88\uc744 \uc804\ub2ec\ud574\uc57c \ud55c\ub2e4. Context\ub97c \uc4f0\uba74 \uc774 \ubb38\uc81c\uac00 \ud574\uacb0\ub41c\ub2e4.<\/p>\n
1.2. Context \uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h2>\n
Context\ub294 3\ub2e8\uacc4<\/strong>\ub85c \uc0ac\uc6a9\ud55c\ub2e4: \u2460 \ub9cc\ub4e4\uae30 \u2192 \u2461 \uc81c\uacf5\ud558\uae30 \u2192 \u2462 \uaebc\ub0b4 \uc4f0\uae30<\/p>\n
1.2.1. 1\ub2e8\uacc4: Context \uc0dd\uc131<\/h3>\n
createContext()<\/code>\ub85c \ub370\uc774\ud130\ub97c \ub2f4\uc744 \uadf8\ub987(Context \uac1d\uccb4)<\/strong> \uc744 \ub9cc\ub4e0\ub2e4.
\n\uc774\ub984\uc740 \uc790\uc720\ub86d\uac8c \ubd99\uc5ec\ub3c4 \ub418\uc9c0\ub9cc \ubcf4\ud1b5 \ubb34\uc5c7Context<\/code> \ud615\ud0dc\ub85c \uc9d3\ub294\ub2e4.<\/p>\n
import { createContext } from 'react';\n\nconst UserContext = createContext();\n\/\/ UserContext\ub77c\ub294 \ube48 \uadf8\ub987\uc744 \ub9cc\ub4e4\uc5c8\ub2e4.\n\/\/ \ub098\uc911\uc5d0 \uc774 \uc548\uc5d0 \ub370\uc774\ud130\ub97c \ub123\uc5b4\uc11c \uc544\ub798 \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc5d0\uac8c \uc804\ub2ec\ud560 \uac83\uc774\ub2e4.\n<\/code><\/pre>\n
1.2.2. 2\ub2e8\uacc4: Provider\ub85c \uac12 \uc81c\uacf5<\/h3>\n
Context.Provider<\/code>\ub85c \uacf5\uc720\ud560 \ubc94\uc704\ub97c \uac10\uc2f8\uace0<\/strong>, value<\/code>\uc5d0 \uc804\ub2ec\ud560 \ub370\uc774\ud130\ub97c \ub123\ub294\ub2e4.
\nProvider<\/code> \uc548\uc5d0 \uc788\ub294 \ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc774 \uac12\uc5d0 \uc811\uadfc\ud560 \uc218 \uc788\ub2e4.<\/p>\n
function App() {\n  const [user, setUser] = useState('\uae40\ucca0\uc218');\n\n  return (\n    \/\/ UserContext.Provider\ub85c \uac10\uc2f8\uba74 \uc548\uc5d0 \uc788\ub294 \ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\uac00 user\ub97c \uc4f8 \uc218 \uc788\ub2e4\n    <UserContext.Provider value={user}>\n      <Page \/>\n      {\/* Page, Page \uc548\uc758 Header, Header \uc548\uc758 Profile \ubaa8\ub450 \uc811\uadfc \uac00\ub2a5 *\/}\n    <\/UserContext.Provider>\n  );\n}\n<\/code><\/pre>\n
1.2.3. 3\ub2e8\uacc4: useContext\ub85c \uac12 \uc0ac\uc6a9<\/h3>\n
useContext(Context\uc774\ub984)<\/code>\uc744 \ud638\ucd9c\ud558\uba74 Provider\uac00 \uc81c\uacf5\ud55c \uac12\uc744 \ubc14\ub85c \uaebc\ub0bc \uc218 \uc788\ub2e4.
\n\uba87 \ub2e8\uacc4\ub97c \uac70\uce58\ub4e0 \uc0c1\uad00\uc5c6\uc774 \uc9c1\uc811<\/strong> \uac00\uc838\uc628\ub2e4.<\/p>\n
import { useContext } from 'react';\n\nfunction Profile() {\n  \/\/ UserContext\uc5d0\uc11c \uac12\uc744 \uaebc\ub0b8\ub2e4. Props \uc5c6\uc774\ub3c4 \ubc14\ub85c \uc0ac\uc6a9 \uac00\ub2a5!\n  const user = useContext(UserContext);\n\n  return <div>\uc0ac\uc6a9\uc790: {user}<\/div>;\n}\n<\/code><\/pre>\n
1.3. \ub2e4\ud06c\ubaa8\ub4dc \uad6c\ud604 \uc608\uc81c<\/h2>\n
Context\ub97c \uc2e4\uc81c\ub85c \ud65c\uc6a9\ud558\ub294 \ub300\ud45c\uc801\uc778 \uc0ac\ub840\ub2e4.
\n\ub2e4\ud06c\ubaa8\ub4dc \uc0c1\ud0dc\ub97c Context\uc5d0 \ub123\uc5b4\ub450\uba74, \ud654\uba74 \uc5b4\ub514\uc11c\ub4e0 \ubc84\ud2bc \ud558\ub098\ub85c \ud14c\ub9c8\ub97c \ubc14\uafc0 \uc218 \uc788\ub2e4.<\/p>\n
\uc804\uccb4 \uad6c\uc870\ub97c \uba3c\uc800 \ubcf4\uba74:<\/p>\n
App\n\u2514\u2500\u2500 ThemeProvider  \u2190 isDark \uc0c1\ud0dc\uc640 toggleTheme \ud568\uc218\ub97c Context\uc5d0 \ub123\uc74c\n    \u2514\u2500\u2500 Layout     \u2190 isDark\ub85c \ubc30\uacbd\uc0c9 \ubcc0\uacbd\n        \u251c\u2500\u2500 ToggleButton  \u2190 toggleTheme\uc73c\ub85c \ubaa8\ub4dc \uc804\ud658\n        \u2514\u2500\u2500 Content       \u2190 isDark\ub85c \ud14d\uc2a4\ud2b8 \ud45c\uc2dc\n<\/code><\/pre>\n
1\ub2e8\uacc4: Context \uc0dd\uc131<\/h3>\n
import { createContext, useContext, useState } from 'react';\n\nconst ThemeContext = createContext();\n\/\/ \ud14c\ub9c8 \uc815\ubcf4(isDark, toggleTheme)\ub97c \ub2f4\uc744 \uadf8\ub987\uc744 \ub9cc\ub4e0\ub2e4\n<\/code><\/pre>\n
2\ub2e8\uacc4: Provider \ucef4\ud3ec\ub10c\ud2b8 \ub9cc\ub4e4\uae30<\/h3>\n
\uc0c1\ud0dc \uad00\ub9ac\uc640 Provider \uc5ed\ud560\uc744 \ud558\ub098\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ubb36\ub294\ub2e4.
\nchildren<\/code>\uc740 \uc774 \ucef4\ud3ec\ub10c\ud2b8 \uc548\uc5d0 \ub4e4\uc5b4\uc62c \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \uc758\ubbf8\ud55c\ub2e4.<\/p>\n
function ThemeProvider({ children }) {\n  \/\/ isDark: \ud604\uc7ac \ub2e4\ud06c\ubaa8\ub4dc\uc778\uc9c0 \uc5ec\ubd80 (\uae30\ubcf8\uac12: false = \ub77c\uc774\ud2b8\ubaa8\ub4dc)\n  const [isDark, setIsDark] = useState(false);\n\n  \/\/ \ubc84\ud2bc\uc744 \ub204\ub97c \ub54c\ub9c8\ub2e4 true \u2194 false \ub97c \ubc88\uac08\uc544 \ubc14\uafb8\ub294 \ud568\uc218\n  \/\/ prev\ub294 \ud604\uc7ac \uac12\uc774\ub2e4. !prev \ub294 \ubc18\ub300\uac12\uc744 \uc758\ubbf8\ud55c\ub2e4\n  const toggleTheme = () => setIsDark(prev => !prev);\n\n  return (\n    \/\/ isDark(\ud604\uc7ac \ubaa8\ub4dc)\uc640 toggleTheme(\ubcc0\uacbd \ud568\uc218) \ub450 \uac00\uc9c0\ub97c \ud568\uaed8 \uc804\ub2ec\n    <ThemeContext.Provider value={{ isDark, toggleTheme }}>\n      {children}\n    <\/ThemeContext.Provider>\n  );\n}\n<\/code><\/pre>\n
3\ub2e8\uacc4: isDark\ub85c \uc2a4\ud0c0\uc77c \ubcc0\uacbd\ud558\uae30<\/h3>\n
isDark<\/code> \uac12\uc5d0 \ub530\ub77c \ubc30\uacbd\uc0c9\uacfc \uae00\uc790\uc0c9\uc744 \ub2e4\ub974\uac8c \uc9c0\uc815\ud55c\ub2e4.
\n\uc0bc\ud56d\uc5f0\uc0b0\uc790 \uc870\uac74 ? \ucc38\uc77c\ub54c\uac12 : \uac70\uc9d3\uc77c\ub54c\uac12<\/code> \uc744 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n
function Layout() {\n  \/\/ ThemeContext\uc5d0\uc11c isDark\ub9cc \uaebc\ub0b8\ub2e4\n  const { isDark } = useContext(ThemeContext);\n\n  const style = {\n    background: isDark ? '#1a1a1a' : '#ffffff',  \/\/ \ub2e4\ud06c: \uc5b4\ub450\uc6b4 \ud68c\uc0c9 \/ \ub77c\uc774\ud2b8: \ud770\uc0c9\n    color:      isDark ? '#ffffff' : '#000000',  \/\/ \ub2e4\ud06c: \ud770 \uae00\uc790  \/ \ub77c\uc774\ud2b8: \uac80\uc815 \uae00\uc790\n    minHeight: '100vh',\n    padding: '20px',\n  };\n\n  return (\n    <div style={style}>\n      <ToggleButton \/>\n      <Content \/>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n
4\ub2e8\uacc4: \ud1a0\uae00 \ubc84\ud2bc<\/h3>\n
toggleTheme<\/code>\uc744 \uaebc\ub0b4\uc11c \ubc84\ud2bc \ud074\ub9ad \uc2dc \uc2e4\ud589\ud55c\ub2e4.
\n\ud604\uc7ac \ubaa8\ub4dc\uc5d0 \ub530\ub77c \ubc84\ud2bc \ud14d\uc2a4\ud2b8\ub3c4 \ubc14\uafbc\ub2e4.<\/p>\n
function ToggleButton() {\n  \/\/ isDark\uc640 toggleTheme \ub458 \ub2e4 \uaebc\ub0b8\ub2e4\n  const { isDark, toggleTheme } = useContext(ThemeContext);\n\n  return (\n    \/\/ \ubc84\ud2bc\uc744 \ub204\ub974\uba74 toggleTheme \uc2e4\ud589 \u2192 isDark\uac00 \ubc18\uc804\ub428\n    <button onClick={toggleTheme}>\n      {isDark ? '\u2600\ufe0f \ub77c\uc774\ud2b8 \ubaa8\ub4dc' : '\ud83c\udf19 \ub2e4\ud06c \ubaa8\ub4dc'}\n      {\/* \ub2e4\ud06c\ubaa8\ub4dc\uc77c \ub54c: \ub77c\uc774\ud2b8 \ubaa8\ub4dc\ub85c \ubc14\uafb8\ub294 \ubc84\ud2bc \ud45c\uc2dc *\/}\n      {\/* \ub77c\uc774\ud2b8\ubaa8\ub4dc\uc77c \ub54c: \ub2e4\ud06c \ubaa8\ub4dc\ub85c \ubc14\uafb8\ub294 \ubc84\ud2bc \ud45c\uc2dc *\/}\n    <\/button>\n  );\n}\n<\/code><\/pre>\n
5\ub2e8\uacc4: \ucf58\ud150\uce20<\/h3>\n
function Content() {\n  const { isDark } = useContext(ThemeContext);\n\n  \/\/ \ud604\uc7ac \uc5b4\ub5a4 \ubaa8\ub4dc\uc778\uc9c0 \ud14d\uc2a4\ud2b8\ub85c \ud45c\uc2dc\n  return <p>\ud604\uc7ac \ubaa8\ub4dc: {isDark ? '\ub2e4\ud06c' : '\ub77c\uc774\ud2b8'}<\/p>;\n}\n<\/code><\/pre>\n
6\ub2e8\uacc4: \uc571 \ub8e8\ud2b8\uc5d0\uc11c Provider\ub85c \uac10\uc2f8\uae30<\/h3>\n
ThemeProvider<\/code>\ub85c \uac10\uc2f8\uc57c \uadf8 \uc548\uc758 \ubaa8\ub4e0 \ucef4\ud3ec\ub10c\ud2b8\uac00 Context\ub97c \uc4f8 \uc218 \uc788\ub2e4.
\n\uac10\uc2f8\uc9c0 \uc54a\uc73c\uba74 useContext<\/code>\ub97c \ud638\ucd9c\ud574\ub3c4 \uac12\uc774 \uc5c6\uc5b4\uc11c \uc624\ub958\uac00 \ub09c\ub2e4.<\/p>\n
function App() {\n  return (\n    <ThemeProvider>   {\/* \uc774 \uc548\uc5d0 \uc788\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ubaa8\ub450 ThemeContext\uc5d0 \uc811\uadfc \uac00\ub2a5 *\/}\n      <Layout \/>\n    <\/ThemeProvider>\n  );\n}\n<\/code><\/pre>\n
\ud575\uc2ec \ud3ec\uc778\ud2b8:<\/strong><\/p>\n