{"id":39071,"date":"2024-11-02T02:36:46","date_gmt":"2024-11-02T02:36:46","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=39071"},"modified":"2024-11-26T06:42:31","modified_gmt":"2024-11-26T06:42:31","slug":"context-api%ec%99%80-%ec%a0%84%ec%97%ad-%ec%83%81%ed%83%9c-%ea%b4%80%eb%a6%ac-redux%ec%99%80-context-api-%eb%b9%84%ea%b5%90-%eb%b0%8f-%ec%84%a0%ed%83%9d","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/39071\/","title":{"rendered":"Context API\uc640 \uc804\uc5ed \uc0c1\ud0dc \uad00\ub9ac, Redux\uc640 Context API \ube44\uad50 \ubc0f \uc120\ud0dd"},"content":{"rendered":"

<\/p>\n

\ub9ac\uc561\ud2b8(React)\ub294 \uc778\uae30 \uc788\ub294 JavaScript \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c, \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4(UI)\ub97c \uad6c\ucd95\ud558\ub294 \ub370 \uc0ac\uc6a9\ub429\ub2c8\ub2e4. \ub9ac\uc561\ud2b8\ub97c \uc0ac\uc6a9\ud560 \ub54c, \uc885\uc885 \uc804\uc5ed \uc0c1\ud0dc \uad00\ub9ac\uc5d0 \ub300\ud55c \ud544\uc694\uc131\uc774 \ubc1c\uc0dd\ud569\ub2c8\ub2e4. \uc77c\ubc18\uc801\uc73c\ub85c \uc804\uc5ed \uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac\uc778 Redux\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud560 \uc218 \uc788\uc9c0\ub9cc, \ub9ac\uc561\ud2b8\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 Context API\ub3c4 \ub9ce\uc740 \uacbd\uc6b0\uc5d0 \ud6a8\uacfc\uc801\uc73c\ub85c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 Context API\uc640 Redux\ub97c \ube44\uad50\ud558\uace0, \uac01\uac01\uc758 \uc7a5\ub2e8\uc810\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

Context API\ub780 \ubb34\uc5c7\uc778\uac00?<\/h2>\n

Context API\ub294 \ub9ac\uc561\ud2b8\uc5d0\uc11c \uc804\uc5ed \ub370\uc774\ud130\ub97c \ub2e4\ub8e8\uae30 \uc704\ud55c \ubc29\ubc95 \uc911 \ud558\ub098\uc785\ub2c8\ub2e4. \uc774 API\ub97c \uc0ac\uc6a9\ud558\uba74 \ucef4\ud3ec\ub10c\ud2b8 \ud2b8\ub9ac \uc804\uccb4\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac04\ud3b8\ud558\uac8c \uacf5\uc720\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Context API\ub294 React 16.3\ubd80\ud130 \ub3c4\uc785\ub418\uc5c8\uc73c\uba70, \uc804\uc5ed \uc0c1\ud0dc \uad00\ub9ac\uac00 \ud544\uc694\ud55c \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \ubcf5\uc7a1\uc131\uc744 \uc904\uc774\ub294 \ub370 \ub3c4\uc6c0\uc744 \uc90d\ub2c8\ub2e4.<\/p>\n

Context API\uc758 \uae30\ubcf8 \uc0ac\uc6a9\ubc95<\/h3>\n

Context API\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud574\uc11c\ub294 createContext<\/code> \ud568\uc218\ub97c \uc0ac\uc6a9\ud558\uc5ec Context \uac1d\uccb4\ub97c \uc0dd\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ud6c4, Provider<\/code> \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc5d0\uac8c \ub370\uc774\ud130\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub9c8\uc9c0\ub9c9\uc73c\ub85c, Consumer<\/code> \ucef4\ud3ec\ub10c\ud2b8 \ub610\ub294 useContext<\/code> \ud6c5\uc744 \uc774\uc6a9\ud558\uc5ec \uc81c\uacf5\ub41c \ub370\uc774\ud130\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\uc608\uc81c: Context API \uc0ac\uc6a9\ud558\uae30<\/h4>\n
import React, { createContext, useContext, useState } from 'react';\n\n\/\/ Context \uac1d\uccb4 \uc0dd\uc131\nconst ThemeContext = createContext();\n\n\/\/ Provider \ucef4\ud3ec\ub10c\ud2b8\nconst ThemeProvider = ({ children }) => {\n    const [theme, setTheme] = useState('light');\n\n    const toggleTheme = () => {\n        setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));\n    };\n\n    return (\n        \n            {children}\n        <\/themecontext.provider>\n    );\n};\n\n\/\/ \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\nconst ThemedComponent = () => {\n    const { theme, toggleTheme } = useContext(ThemeContext);\n\n    return (\n        
\n            
\ud604\uc7ac \ud14c\ub9c8: {theme}<\/p>\n