{"id":38956,"date":"2024-11-02T02:35:53","date_gmt":"2024-11-02T02:35:53","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=38956"},"modified":"2024-11-26T06:42:49","modified_gmt":"2024-11-26T06:42:49","slug":"context-api%ec%99%80-%ec%a0%84%ec%97%ad-%ec%83%81%ed%83%9c-%ea%b4%80%eb%a6%ac-%eb%8b%a4%ec%96%91%ed%95%9c-context-%ec%98%88%ec%a0%9c%ec%99%80-%ed%99%9c%ec%9a%a9%eb%b2%95","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/38956\/","title":{"rendered":"Context API\uc640 \uc804\uc5ed \uc0c1\ud0dc \uad00\ub9ac, \ub2e4\uc591\ud55c Context \uc608\uc81c\uc640 \ud65c\uc6a9\ubc95"},"content":{"rendered":"

<\/p>\n

\n

\n \ucd5c\uadfc Frontend \uac1c\ubc1c\uc5d0\uc11c \uc0c1\ud0dc \uad00\ub9ac \ub77c\uc774\ube0c\ub7ec\ub9ac\ub4e4\uc774 \ub9ce\uc774 \uc0ac\uc6a9\ud558\ub294\ub370, \uadf8 \uc911\uc5d0\uc11c\ub3c4 Redux, MobX\uc640 \uac19\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub4e4\uc774 \ub9ce\uc774 \uc54c\ub824\uc838 \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc9c0\ub9cc React \ud300\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 Context API\ub97c \uc0ac\uc6a9\ud558\uba74, \ubcf5\uc7a1\ud55c \uc0c1\ud0dc \uad00\ub9ac\ub97c \uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. Context API\ub294 \uac04\ub2e8\ud55c API\ub97c \uc81c\uacf5\ud558\uba74\uc11c\ub3c4 \ub2e4\uc591\ud55c \uc0c1\ud0dc \uad00\ub9ac \uc2dc\ub098\ub9ac\uc624\ub97c \uc9c0\uc6d0\ud558\uc5ec \uac1c\ubc1c\uc790\ub4e4\uc774 \ubcf4\ub2e4 \ub354 \ud6a8\uc728\uc801\uc73c\ub85c \uc804\uc5ed \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud560 \uc218 \uc788\ub3c4\ub85d \ub3c4\uc640\uc90d\ub2c8\ub2e4.\n <\/p>\n

1. Context API \uae30\ubcf8 \uac1c\ub150<\/h2>\n

\n Context API\ub294 React\uc5d0\uc11c \ucef4\ud3ec\ub10c\ud2b8 \ud2b8\ub9ac \uc804\uc5ed\uc5d0\uc11c \uac12\uc744 \uacf5\uc720\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc8fc\ub294 \uba54\ucee4\ub2c8\uc998\uc785\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ucef4\ud3ec\ub10c\ud2b8 \uac04\uc5d0 props\ub97c \uc218\ub3d9\uc73c\ub85c \uc804\ud30c\ud558\uc9c0 \uc54a\uace0\ub3c4 \ud544\uc694\ud55c \ub370\uc774\ud130\uc5d0 \uc811\uadfc\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uad6c\uccb4\uc801\uc73c\ub85c\ub294 Context\ub97c \uc0dd\uc131\ud558\uace0, Provider\ub85c \ub370\uc774\ud130\ub97c \uc81c\uacf5\ud558\uace0, Consumer\ub85c \ub370\uc774\ud130\ub97c \uc0ac\uc6a9\ud558\ub294 \ubc29\uc2dd\uc73c\ub85c \uc791\ub3d9\ud569\ub2c8\ub2e4.\n <\/p>\n

1.1 Context \uc0dd\uc131<\/h3>\n

\n Context\ub97c \uc0dd\uc131\ud558\uae30 \uc704\ud574 React\uc758 createContext<\/code> \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc774 \uba54\uc11c\ub4dc\ub294 \uae30\ubcf8\uac12\uc744 \uc778\uc790\ub85c \ubc1b\uc544\uc11c Context \uac1d\uccb4\ub97c \ubc18\ud658\ud569\ub2c8\ub2e4.\n <\/p>\n

\nconst MyContext = React.createContext(defaultValue);\n        <\/code><\/pre>\n
1.2 Provider<\/h3>\n
\n            Context\uc758 Provider\ub294 \ud558\uc704 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \uac12\uc744 \uc804\ub2ec\ud558\ub294 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4. Provider\ub294 value<\/code> \uc18d\uc131\uc744 \ud1b5\ud574 \uc81c\uacf5\ud560 \uac12\uc744 \uc124\uc815\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \ud558\uc704 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc774 \uac12\uc744 \uc77d\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.\n        <\/p>\n
\n\n  {\/* \ud558\uc704 \ucef4\ud3ec\ub10c\ud2b8 *\/}\n<\/mycontext.provider>\n        <\/code><\/pre>\n
1.3 Consumer<\/h3>\n
\n            Consumer\ub294 Context\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 \uac12\uc744 \uc561\uc138\uc2a4\ud558\ub294 \ubc29\uc2dd\uc73c\ub85c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uc0ac\uc6a9\ubc95\uc740 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4:\n        <\/p>\n
\n\n  {value => \/* value\ub97c \uc0ac\uc6a9 *\/}\n<\/mycontext.consumer>\n        <\/code><\/pre>\n
2. \uc804\uc5ed \uc0c1\ud0dc \uad00\ub9ac<\/h2>\n
\n            \ub9ce\uc740 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc0c1\ud0dc\ub294 \ucef4\ud3ec\ub10c\ud2b8 \uac04\uc5d0 \uc790\uc8fc \uacf5\uc720\ub418\uc5b4\uc57c \ud558\uba70, \uc0c1\ud0dc\uc758 \ubcf5\uc7a1\uc131\uc774 \uc99d\uac00\ud568\uc5d0 \ub530\ub77c \ud6a8\uc728\uc801\uc73c\ub85c \uad00\ub9ac\ud558\ub294 \uac83\uc774 \uc911\uc694\ud569\ub2c8\ub2e4. Context API\ub97c \ud1b5\ud574 \uc804\uc5ed \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc54c\uc544\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. \ub2e8\uc21c\ud55c \uce74\uc6b4\ud130 \uc608\uc81c\ub97c \ud1b5\ud574 \uc804\uc5ed \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.\n        <\/p>\n
2.1 \uc608\uc81c: \uce74\uc6b4\ud130 \uc560\ud50c\ub9ac\ucf00\uc774\uc158<\/h3>\n
\nimport React, { createContext, useState, useContext } from 'react';\n\n\/\/ Context \uc0dd\uc131\nconst CounterContext = createContext();\n\nconst CounterProvider = ({ children }) => {\n    const [count, setCount] = useState(0);\n\n    const increment = () => setCount(count + 1);\n    const decrement = () => setCount(count - 1);\n\n    return (\n        \n            {children}\n        <\/countercontext.provider>\n    );\n};\n\nconst CounterDisplay = () => {\n    const { count } = useContext(CounterContext);\n    return 
\ud604\uc7ac \uce74\uc6b4\ud2b8: {count}<\/h2>;\n};\n\nconst CounterButtons = () => {\n    const { increment, decrement } = useContext(CounterContext);\n    return (\n        
\n