{"id":39010,"date":"2024-11-02T02:36:19","date_gmt":"2024-11-02T02:36:19","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=39010"},"modified":"2024-11-26T06:42:40","modified_gmt":"2024-11-26T06:42:40","slug":"%eb%a6%ac%ec%95%a1%ed%8a%b8%eb%a1%9c-%eb%8c%80%ec%8b%9c%eb%b3%b4%eb%93%9c-%eb%a7%8c%eb%93%a4%ea%b8%b0-react-router%ec%99%80-redux%eb%a1%9c-%ed%8e%98%ec%9d%b4%ec%a7%80-%ea%b5%ac%ec%84%b1-%eb%b0%8f","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/39010\/","title":{"rendered":"\ub9ac\uc561\ud2b8\ub85c \ub300\uc2dc\ubcf4\ub4dc \ub9cc\ub4e4\uae30, React Router\uc640 Redux\ub85c \ud398\uc774\uc9c0 \uad6c\uc131 \ubc0f \uad00\ub9ac"},"content":{"rendered":"

<\/p>\n

\uc774\ubc88 \uae00\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\ub97c \ud65c\uc6a9\ud558\uc5ec \ub300\uc2dc\ubcf4\ub4dc\ub97c \ub9cc\ub4dc\ub294 \ubc29\ubc95, React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud398\uc774\uc9c0\ub97c \uad6c\uc131\ud558\ub294 \ubc29\uc2dd, \uadf8\ub9ac\uace0 Redux\ub97c \ud1b5\ud574 \uc0c1\ud0dc \uad00\ub9ac\ub97c \uc9c4\ud589\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

1. \ud504\ub85c\uc81d\ud2b8 \uc124\uc815<\/h2>\n

\ub300\uc2dc\ubcf4\ub4dc \ud504\ub85c\uc81d\ud2b8\ub97c \uc2dc\uc791\ud558\uae30 \uc804\uc5d0 \uba3c\uc800 \ub9ac\uc561\ud2b8 \ud658\uacbd\uc744 \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. Create React App\uc744 \uc0ac\uc6a9\ud558\uba74 \uc190\uc27d\uac8c \ub9ac\uc561\ud2b8 \ud504\ub85c\uc81d\ud2b8\ub97c \uc0dd\uc131\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n

\n        \n            npx create-react-app dashboard-app\n            cd dashboard-app\n            npm install react-router-dom redux react-redux\n        <\/code>\n    <\/pre>\n
\uc5ec\uae30\uc11c\ub294 react-router-dom<\/code>\uc744 \uc0ac\uc6a9\ud558\uc5ec \ud398\uc774\uc9c0 \uc0ac\uc774\uc758 \ud0d0\uc0c9\uc744 \uad6c\uc131\ud558\uace0, redux<\/code>\uc640 react-redux<\/code>\ub97c \uc0ac\uc6a9\ud574 \uc0c1\ud0dc \uad00\ub9ac\ub97c \ucc98\ub9ac\ud560 \uac83\uc785\ub2c8\ub2e4.<\/p>\n
2. \uae30\ubcf8 \uad6c\uc870 \uc124\uc815<\/h2>\n
\uba3c\uc800 \ud504\ub85c\uc81d\ud2b8\uc758 \uae30\ubcf8 \uad6c\uc870\ub97c \uc124\uc815\ud569\ub2c8\ub2e4. src<\/code> \ub514\ub809\ud1a0\ub9ac \uc544\ub798\uc5d0 components<\/code>, pages<\/code>, redux<\/code> \ub514\ub809\ud1a0\ub9ac\ub97c \uc0dd\uc131\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\n        \n            \u251c\u2500\u2500 src\n            \u2502   \u251c\u2500\u2500 components\n            \u2502   \u251c\u2500\u2500 pages\n            \u2502   \u2514\u2500\u2500 redux\n        <\/code>\n    <\/pre>\n
3. React Router \uc124\uc815<\/h2>\n
React Router\ub97c \ud1b5\ud574 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\uc758 \ub2e4\uc591\ud55c \ud398\uc774\uc9c0 \uac04\uc758 \ud0d0\uc0c9\uc744 \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. src\/App.js<\/code> \ud30c\uc77c\uc744 \uc5f4\uc5b4 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud569\ub2c8\ub2e4:<\/p>\n
\n        \n            import React from 'react';\n            import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n            import Home from '.\/pages\/Home';\n            import About from '.\/pages\/About';\n            import NotFound from '.\/pages\/NotFound';\n\n            function App() {\n                return (\n                    \n                        \n                            <\/route>\n                            <\/route>\n                            <\/route>\n                        <\/switch>\n                    <\/router>\n                );\n            }\n\n            export default App;\n        <\/code>\n    <\/pre>\n
3.1 \uac01 \ud398\uc774\uc9c0(Component) \uc0dd\uc131<\/h3>\n
\uc774\uc81c pages<\/code> \ub514\ub809\ud1a0\ub9ac\uc5d0 Home.js<\/code>, About.js<\/code>, NotFound.js<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uac04\ub2e8\ud55c \ub0b4\uc6a9\uc744 \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n
\n        \n            \/\/ src\/pages\/Home.js\n            import React from 'react';\n\n            function Home() {\n                return 
\ud648 \ud398\uc774\uc9c0<\/h2>;\n            }\n\n            export default Home;\n        <\/code>\n    <\/pre>\n
\n        \n            \/\/ src\/pages\/About.js\n            import React from 'react';\n\n            function About() {\n                return 
\uc18c\uac1c \ud398\uc774\uc9c0<\/h2>;\n            }\n\n            export default About;\n        <\/code>\n    <\/pre>\n
\n        \n            \/\/ src\/pages\/NotFound.js\n            import React from 'react';\n\n            function NotFound() {\n                return 
\ud398\uc774\uc9c0\ub97c \ucc3e\uc744 \uc218 \uc5c6\uc2b5\ub2c8\ub2e4.<\/h2>;\n            }\n\n            export default NotFound;\n        <\/code>\n    <\/pre>\n
4. Redux \uc124\uc815<\/h2>\n
\uc0c1\ud0dc \uad00\ub9ac\ub97c \uc704\ud574 Redux\ub97c \uc0ac\uc6a9\ud560 \uac83\uc785\ub2c8\ub2e4. Redux\ub294 \uc911\uc559 \ub370\uc774\ud130 \uc800\uc7a5\uc18c\ub97c \ud1b5\ud574 \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\uba70, \uc774\ub294 \uc5ec\ub7ec \ucef4\ud3ec\ub10c\ud2b8 \uac04\uc5d0 \uc77c\uad00\ub41c \uc0c1\ud0dc\ub97c \uc81c\uacf5\ud569\ub2c8\ub2e4.<\/p>\n
4.1 Redux \uc2a4\ud1a0\uc5b4 \uc0dd\uc131<\/h3>\n
\uba3c\uc800 redux<\/code> \ub514\ub809\ud1a0\ub9ac \ub0b4\uc5d0 store.js<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n
\n        \n            \/\/ src\/redux\/store.js\n            import { createStore } from 'redux';\n\n            const initialState = {\n                count: 0,\n            };\n\n            const reducer = (state = initialState, action) => {\n                switch (action.type) {\n                    case 'INCREMENT':\n                        return { ...state, count: state.count + 1 };\n                    case 'DECREMENT':\n                        return { ...state, count: state.count - 1 };\n                    default:\n                        return state;\n                }\n            };\n\n            const store = createStore(reducer);\n\n            export default store;\n        <\/code>\n    <\/pre>\n
4.2 Redux \ud504\ub85c\ubc14\uc774\ub354 \uc124\uc815<\/h3>\n
\uc774\uc81c src\/index.js<\/code> \ud30c\uc77c\uc744 \uc218\uc815\ud558\uc5ec Redux \uc2a4\ud1a0\uc5b4\ub97c \ud504\ub85c\ubc14\uc774\ub354\ub85c \uac10\uc2f8\uc8fc\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\n        \n            import React from 'react';\n            import ReactDOM from 'react-dom';\n            import { Provider } from 'react-redux';\n            import store from '.\/redux\/store';\n            import App from '.\/App';\n\n            ReactDOM.render(\n                \n                    <\/app>\n                <\/provider>,\n                document.getElementById('root')\n            );\n        <\/code>\n    <\/pre>\n
4.3 Redux\ub97c \uc0ac\uc6a9\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8<\/h3>\n
\uc774\uc81c Redux \uc0c1\ud0dc\ub97c \uc0ac\uc6a9\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4e4\uc5b4 \ubcf4\uaca0\uc2b5\ub2c8\ub2e4. src\/components\/Counter.js<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \ub2e4\uc74c\uacfc \uac19\uc774 \uc791\uc131\ud569\ub2c8\ub2e4.<\/p>\n
\n        \n            \/\/ src\/components\/Counter.js\n            import React from 'react';\n            import { useDispatch, useSelector } from 'react-redux';\n\n            function Counter() {\n                const count = useSelector((state) => state.count);\n                const dispatch = useDispatch();\n\n                return (\n                    
\n                        
\ud604\uc7ac \uce74\uc6b4\ud2b8: {count}<\/h2>\n