\ub9ac\uc561\ud2b8(React)\uc5d0\uc11c\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uac04\uc758 \uc0c1\ud0dc(state)\ub97c \uc804\ub2ec\ud558\uace0 \uad00\ub9ac\ud558\ub294 \ub370 \uc5ec\ub7ec \ubc29\ubc95\uc774 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\uc911\uc5d0\uc11c\ub3c4 Context API<\/strong>\ub294 \uc804\uc5ed \uc0c1\ud0dc \uad00\ub9ac\uc758 \uc911\uc694 \ub3c4\uad6c\ub85c \uc790\ub9ac\uc7a1\uc558\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 Context API\uc758 \uae30\ubcf8 \uac1c\ub150\uc744 \uc18c\uac1c\ud558\uace0, \uc774\ub97c \ud65c\uc6a9\ud558\uc5ec \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\uace0 \uacf5\uc720\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n Context API\ub294 \ub9ac\uc561\ud2b8\uc5d0\uc11c \uc804\uc5ed\uc801\uc73c\ub85c \ub370\uc774\ud130\ub97c \uacf5\uc720\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc8fc\ub294 \uc2dc\uc2a4\ud15c\uc785\ub2c8\ub2e4. \ucef4\ud3ec\ub10c\ud2b8 \ud2b8\ub9ac \uc804\uccb4\uc5d0\uc11c \uc0c1\ud0dc(state)\ub098 \ud568\uc218\ub97c \uc27d\uac8c \uc804\ub2ec\ud560 \uc218 \uc788\uc73c\uba70, props drilling\uc744 \ud53c\ud560 \uc218 \uc788\ub294 \uc720\uc6a9\ud55c \ubc29\ubc95\uc785\ub2c8\ub2e4. \uc774\ub294 \ud2b9\uc815 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc18d\ud558\uc9c0 \uc54a\uc740 \ub370\uc774\ud130\ub098 \ud568\uc218\ub97c \ub2e4\ub978 \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4.<\/p>\n Context API\ub97c \uc0ac\uc6a9\ud558\ub824\uba74 \uba3c\uc800 \uc0dd\uc131\ud55c Context\ub294 \ub450 \uac00\uc9c0 \uc8fc\uc694 \ucef4\ud3ec\ub10c\ud2b8, \uc774\uc81c Context API\uc758 \uc0dd\uc131 \ubc0f \uc0ac\uc6a9 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uc558\uc73c\ub2c8, \uc774\ub97c \ud65c\uc6a9\ud558\uc5ec \uc0c1\ud0dc\ub97c \uacf5\uc720\ud558\ub294 \uc608\uc2dc\ub97c \ubcf4\uc5ec\ub4dc\ub9ac\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n1. Context API\ub780?<\/h2>\n
2. Context API\uc758 \uc7a5\uc810<\/h2>\n
\n
3. Context API \uc0ac\uc6a9\ubc95<\/h2>\n
3.1 Context \uc0dd\uc131\ud558\uae30<\/h3>\n
createContext<\/code> \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec Context\ub97c \uc0dd\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. \uc544\ub798\uc758 \uc608\uc2dc\ub97c \ud1b5\ud574 \uc774\ud574\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\nimport React, { createContext } from 'react';\n\nconst MyContext = createContext(); \/\/ Context \uc0dd\uc131<\/code><\/pre>\n3.2 Provider\uc640 Consumer<\/h3>\n
Provider<\/code>\uc640 Consumer<\/code>\ub97c \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. Provider<\/code>\ub294 Context\uc758 \uac12\uc744 \ud558\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uc81c\uacf5\ud558\uace0, Consumer<\/code>\ub294 \uc81c\uacf5\ub41c \uac12\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uac8c \ud574\uc90d\ub2c8\ub2e4.<\/p>\nconst MyProvider = ({ children }) => {\n const [state, setState] = React.useState({ name: '\ub9ac\uc561\ud2b8', version: '18.0' });\n\n return (\n 3.3 Context \uc0ac\uc6a9 \uc608\uc2dc<\/h3>\n
import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { createContext, useState, useContext } from 'react';\n\n\/\/ Context \uc0dd\uc131\nconst ThemeContext = createContext();\n\nconst ThemeProvider = ({ children }) => {\n const [theme, setTheme] = useState('light');\n\n return (\n Hello, Themed World!<\/h1>\n