\ud604\ub300 \uc6f9 \uac1c\ubc1c\uc5d0\uc11c \ud5e4\ub4dc\ub9ac\uc2a4 CMS(\ucf58\ud150\uce20 \uad00\ub9ac \uc2dc\uc2a4\ud15c)\uc758 \uc0ac\uc6a9\uc774 \uc99d\uac00\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \uc774\ub7ec\ud55c \ud5e4\ub4dc\ub9ac\uc2a4 CMS\ub85c\uc11c\uc758 \uac00\ub2a5\uc131\uc744 \uc81c\uacf5\ud558\uae30 \uc704\ud574 WP REST API\ub97c \uc9c0\uc6d0\ud569\ub2c8\ub2e4. WP REST API\ub294 \uac1c\ubc1c\uc790\uac00 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub97c \ubc31\uc5d4\ub4dc\ub85c \uc0ac\uc6a9\ud558\uace0, \ud504\ub860\ud2b8\uc5d4\ub4dc \ud504\ub808\uc784\uc6cc\ud06c(React, Vue.js, Angular \ub4f1)\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc720\uc5f0\ud55c \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ud604\ud560 \uc218 \uc788\ub294 \ubc29\ubc95\uc744 \uc81c\uc2dc\ud569\ub2c8\ub2e4. \ubcf8 \uae00\uc5d0\uc11c\ub294 WP REST API\ub97c \uc774\uc6a9\ud55c \ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4 \uad6c\ud604 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc124\uba85\ud558\uace0, \uc2e4\uc81c \ucf54\ub4dc \uc608\uc81c\ub97c \ud1b5\ud574 \uc774\ud574\ub97c \ub3d5\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc\uc640 \ubc31\uc5d4\ub4dc\uac00 \ubd84\ub9ac\ub41c \uad6c\uc870\ub97c \ub9d0\ud569\ub2c8\ub2e4. \uc804\ud1b5\uc801\uc778 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ubc31\uc5d4\ub4dc\uc640 \ud504\ub860\ud2b8\uc5d4\ub4dc\uac00 tightly coupled\ub418\uc5b4 \uc788\uc5b4, \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \ubcc0\uacbd\ud558\uace0 \uc2f6\uc73c\uba74 \ubc31\uc5d4\ub4dc\uc640\uc758 \uae4a\uc740 \ud1b5\ud569\uc774 \ud544\uc694\ud588\uc2b5\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \ud5e4\ub4dc\ub9ac\uc2a4 \uad6c\uc870\uc5d0\uc11c\ub294 \uc6cc\ub4dc\ud504\ub808\uc2a4\uac00 \uc624\uc9c1 \ub370\uc774\ud130 \uc800\uc7a5\uc18c\ub85c \uae30\ub2a5\ud558\uace0, \ud074\ub77c\uc774\uc5b8\ud2b8\ub294 REST API\ub97c \ud1b5\ud574 \ub370\uc774\ud130\ub97c \uc694\uccad\ud558\uc5ec \ud544\uc694\ud560 \ub54c \ub3d9\uc801\uc73c\ub85c \ucf58\ud150\uce20\ub97c \ubc1b\uc544\uc635\ub2c8\ub2e4.<\/p>\n
WP REST API\ub294 \uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c \uc81c\uacf5\ud558\ub294 API\ub85c, JSON \ud615\uc2dd\uc73c\ub85c \ub370\uc774\ud130\uc5d0 \uc811\uadfc\ud560 \uc218 \uc788\ub3c4\ub85d \ud574\uc90d\ub2c8\ub2e4. REST API\ub97c \ud1b5\ud574 \uc0ac\uc6a9\uc790\ub294 \ub2e4\uc591\ud55c HTTP \uba54\uc18c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc6cc\ub4dc\ud504\ub808\uc2a4\uc758 \uac8c\uc2dc\ubb3c(post), \ud398\uc774\uc9c0(page), \ub313\uae00(comment) \ub4f1\uc758 \ub370\uc774\ud130\uc5d0 CRUD(Create, Read, Update, Delete) \uc791\uc5c5\uc744 \uc218\ud589\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
GET \/wp-json\/wp\/v2\/posts<\/code>: \ubaa8\ub4e0 \uac8c\uc2dc\ubb3c \ubaa9\ub85d \uc870\ud68c<\/li>\nGET \/wp-json\/wp\/v2\/posts\/{id}<\/code>: \ud2b9\uc815 \uac8c\uc2dc\ubb3c \uc870\ud68c<\/li>\nPOST \/wp-json\/wp\/v2\/posts<\/code>: \uac8c\uc2dc\ubb3c \uc0dd\uc131<\/li>\nPUT \/wp-json\/wp\/v2\/posts\/{id}<\/code>: \uac8c\uc2dc\ubb3c \uc218\uc815<\/li>\nDELETE \/wp-json\/wp\/v2\/posts\/{id}<\/code>: \uac8c\uc2dc\ubb3c \uc0ad\uc81c<\/li>\n<\/ul>\n3. \ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4 \uc124\uc815\ud558\uae30<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub97c \uad6c\ud604\ud558\uae30 \uc704\ud574\uc11c\ub294 WP REST API\ub97c \ud65c\uc131\ud654\ud558\uace0, \uc774\ub97c \ud65c\uc6a9\ud558\uae30 \uc704\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \ucf54\ub4dc\ub97c \uc791\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. \ub2e4\uc74c \ub2e8\uacc4\uc5d0 \ub530\ub77c \ud5e4\ub4dc\ub9ac\uc2a4 \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \uc124\uc815\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n3.1 WP REST API \ud65c\uc131\ud654<\/h3>\n\uae30\ubcf8\uc801\uc73c\ub85c \ucd5c\uc2e0 \ubc84\uc804\uc758 \uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c\ub294 WP REST API\uac00 \ud65c\uc131\ud654\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \uc0ac\uc6a9 \uc911\uc778 \ud14c\ub9c8\ub098 \ud50c\ub7ec\uadf8\uc778\uc5d0 \ub530\ub77c API\uc758 \uc811\uadfc \uc81c\ud55c\uc774 \uc788\uc744 \uc218 \uc788\uc73c\ubbc0\ub85c \ud655\uc778\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n3.2 CORS \uc124\uc815<\/h3>\n\ud504\ub860\ud2b8\uc5d4\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uacfc \uc6cc\ub4dc\ud504\ub808\uc2a4 \uc11c\ubc84\uac00 \uc11c\ub85c \ub2e4\ub978 \ucd9c\ucc98(origin)\uc77c \uacbd\uc6b0, CORS(Cross-Origin Resource Sharing)\ub97c \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 API \uc694\uccad\uc774 \uac00\ub2a5\ud558\uac8c \ub429\ub2c8\ub2e4. \uc6cc\ub4dc\ud504\ub808\uc2a4\uc758 functions.php\uc5d0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec CORS\ub97c \ud5c8\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n\n add_action('init', 'add_cors_http_header');\n function add_cors_http_header(){\n header(\"Access-Control-Allow-Origin: *\");\n header(\"Access-Control-Allow-Headers: X-Requested-With\");\n }\n <\/code><\/pre>\n4. \ud504\ub860\ud2b8\uc5d4\ub4dc \ucf54\ub4dc \uad6c\ud604<\/h2>\n\uc774\uc81c React.js\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud504\ub860\ud2b8\uc5d4\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ud604\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. React \uc571\uc744 \uc0dd\uc131\ud558\uae30 \uc704\ud574 Create React App\uc744 \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c \uba85\ub839\uc5b4\ub85c \uc0c8\ub85c\uc6b4 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\nnpx create-react-app headless-wp-client<\/code><\/pre>\n\uc0dd\uc131\ub41c React \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud55c \ud6c4, npm start<\/code> \uba85\ub839\uc73c\ub85c \uac1c\ubc1c \uc11c\ubc84\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n4.1 \uac8c\uc2dc\ubb3c \ubaa9\ub85d \uac00\uc838\uc624\uae30<\/h3>\n\uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c \uac8c\uc2dc\ubb3c\uc744 \uac00\uc838\uc624\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 axios<\/code> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. axios<\/code>\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\nnpm install axios<\/code><\/pre>\n\uc774\uc81c App.js<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud558\uc5ec \uac8c\uc2dc\ubb3c \ubaa9\ub85d\uc744 \uac00\uc838\uc624\ub3c4\ub85d \ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() => {\n const fetchPosts = async () => {\n const result = await axios(\n 'https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts',\n );\n setPosts(result.data);\n };\n fetchPosts();\n }, []);\n\n return (\n \n \uc6cc\ub4dc\ud504\ub808\uc2a4 \uac8c\uc2dc\ubb3c \ubaa9\ub85d<\/h1>\n \n {posts.map(post => (\n \n \n {post.title.rendered}\n <\/a>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n4.2 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ubcf4\uae30<\/h3>\n\uac8c\uc2dc\ubb3c\uc758 \uc0c1\uc138 \ubcf4\uae30\ub97c \uc704\ud574, \uac8c\uc2dc\ubb3c ID\ub97c \uae30\ubc18\uc73c\ub85c \ucd94\uac00\uc801\uc778 API \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Router\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\nnpm install react-router-dom<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
GET \/wp-json\/wp\/v2\/posts\/{id}<\/code>: \ud2b9\uc815 \uac8c\uc2dc\ubb3c \uc870\ud68c<\/li>\nPOST \/wp-json\/wp\/v2\/posts<\/code>: \uac8c\uc2dc\ubb3c \uc0dd\uc131<\/li>\nPUT \/wp-json\/wp\/v2\/posts\/{id}<\/code>: \uac8c\uc2dc\ubb3c \uc218\uc815<\/li>\nDELETE \/wp-json\/wp\/v2\/posts\/{id}<\/code>: \uac8c\uc2dc\ubb3c \uc0ad\uc81c<\/li>\n<\/ul>\n3. \ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4 \uc124\uc815\ud558\uae30<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub97c \uad6c\ud604\ud558\uae30 \uc704\ud574\uc11c\ub294 WP REST API\ub97c \ud65c\uc131\ud654\ud558\uace0, \uc774\ub97c \ud65c\uc6a9\ud558\uae30 \uc704\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \ucf54\ub4dc\ub97c \uc791\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. \ub2e4\uc74c \ub2e8\uacc4\uc5d0 \ub530\ub77c \ud5e4\ub4dc\ub9ac\uc2a4 \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \uc124\uc815\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n3.1 WP REST API \ud65c\uc131\ud654<\/h3>\n\uae30\ubcf8\uc801\uc73c\ub85c \ucd5c\uc2e0 \ubc84\uc804\uc758 \uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c\ub294 WP REST API\uac00 \ud65c\uc131\ud654\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \uc0ac\uc6a9 \uc911\uc778 \ud14c\ub9c8\ub098 \ud50c\ub7ec\uadf8\uc778\uc5d0 \ub530\ub77c API\uc758 \uc811\uadfc \uc81c\ud55c\uc774 \uc788\uc744 \uc218 \uc788\uc73c\ubbc0\ub85c \ud655\uc778\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n3.2 CORS \uc124\uc815<\/h3>\n\ud504\ub860\ud2b8\uc5d4\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uacfc \uc6cc\ub4dc\ud504\ub808\uc2a4 \uc11c\ubc84\uac00 \uc11c\ub85c \ub2e4\ub978 \ucd9c\ucc98(origin)\uc77c \uacbd\uc6b0, CORS(Cross-Origin Resource Sharing)\ub97c \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 API \uc694\uccad\uc774 \uac00\ub2a5\ud558\uac8c \ub429\ub2c8\ub2e4. \uc6cc\ub4dc\ud504\ub808\uc2a4\uc758 functions.php\uc5d0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec CORS\ub97c \ud5c8\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n\n add_action('init', 'add_cors_http_header');\n function add_cors_http_header(){\n header(\"Access-Control-Allow-Origin: *\");\n header(\"Access-Control-Allow-Headers: X-Requested-With\");\n }\n <\/code><\/pre>\n4. \ud504\ub860\ud2b8\uc5d4\ub4dc \ucf54\ub4dc \uad6c\ud604<\/h2>\n\uc774\uc81c React.js\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud504\ub860\ud2b8\uc5d4\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ud604\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. React \uc571\uc744 \uc0dd\uc131\ud558\uae30 \uc704\ud574 Create React App\uc744 \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c \uba85\ub839\uc5b4\ub85c \uc0c8\ub85c\uc6b4 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\nnpx create-react-app headless-wp-client<\/code><\/pre>\n\uc0dd\uc131\ub41c React \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud55c \ud6c4, npm start<\/code> \uba85\ub839\uc73c\ub85c \uac1c\ubc1c \uc11c\ubc84\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n4.1 \uac8c\uc2dc\ubb3c \ubaa9\ub85d \uac00\uc838\uc624\uae30<\/h3>\n\uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c \uac8c\uc2dc\ubb3c\uc744 \uac00\uc838\uc624\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 axios<\/code> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. axios<\/code>\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\nnpm install axios<\/code><\/pre>\n\uc774\uc81c App.js<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud558\uc5ec \uac8c\uc2dc\ubb3c \ubaa9\ub85d\uc744 \uac00\uc838\uc624\ub3c4\ub85d \ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() => {\n const fetchPosts = async () => {\n const result = await axios(\n 'https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts',\n );\n setPosts(result.data);\n };\n fetchPosts();\n }, []);\n\n return (\n \n \uc6cc\ub4dc\ud504\ub808\uc2a4 \uac8c\uc2dc\ubb3c \ubaa9\ub85d<\/h1>\n \n {posts.map(post => (\n \n \n {post.title.rendered}\n <\/a>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n4.2 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ubcf4\uae30<\/h3>\n\uac8c\uc2dc\ubb3c\uc758 \uc0c1\uc138 \ubcf4\uae30\ub97c \uc704\ud574, \uac8c\uc2dc\ubb3c ID\ub97c \uae30\ubc18\uc73c\ub85c \ucd94\uac00\uc801\uc778 API \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Router\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\nnpm install react-router-dom<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
POST \/wp-json\/wp\/v2\/posts<\/code>: \uac8c\uc2dc\ubb3c \uc0dd\uc131<\/li>\nPUT \/wp-json\/wp\/v2\/posts\/{id}<\/code>: \uac8c\uc2dc\ubb3c \uc218\uc815<\/li>\nDELETE \/wp-json\/wp\/v2\/posts\/{id}<\/code>: \uac8c\uc2dc\ubb3c \uc0ad\uc81c<\/li>\n<\/ul>\n3. \ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4 \uc124\uc815\ud558\uae30<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub97c \uad6c\ud604\ud558\uae30 \uc704\ud574\uc11c\ub294 WP REST API\ub97c \ud65c\uc131\ud654\ud558\uace0, \uc774\ub97c \ud65c\uc6a9\ud558\uae30 \uc704\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \ucf54\ub4dc\ub97c \uc791\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. \ub2e4\uc74c \ub2e8\uacc4\uc5d0 \ub530\ub77c \ud5e4\ub4dc\ub9ac\uc2a4 \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \uc124\uc815\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n3.1 WP REST API \ud65c\uc131\ud654<\/h3>\n\uae30\ubcf8\uc801\uc73c\ub85c \ucd5c\uc2e0 \ubc84\uc804\uc758 \uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c\ub294 WP REST API\uac00 \ud65c\uc131\ud654\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \uc0ac\uc6a9 \uc911\uc778 \ud14c\ub9c8\ub098 \ud50c\ub7ec\uadf8\uc778\uc5d0 \ub530\ub77c API\uc758 \uc811\uadfc \uc81c\ud55c\uc774 \uc788\uc744 \uc218 \uc788\uc73c\ubbc0\ub85c \ud655\uc778\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n3.2 CORS \uc124\uc815<\/h3>\n\ud504\ub860\ud2b8\uc5d4\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uacfc \uc6cc\ub4dc\ud504\ub808\uc2a4 \uc11c\ubc84\uac00 \uc11c\ub85c \ub2e4\ub978 \ucd9c\ucc98(origin)\uc77c \uacbd\uc6b0, CORS(Cross-Origin Resource Sharing)\ub97c \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 API \uc694\uccad\uc774 \uac00\ub2a5\ud558\uac8c \ub429\ub2c8\ub2e4. \uc6cc\ub4dc\ud504\ub808\uc2a4\uc758 functions.php\uc5d0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec CORS\ub97c \ud5c8\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n\n add_action('init', 'add_cors_http_header');\n function add_cors_http_header(){\n header(\"Access-Control-Allow-Origin: *\");\n header(\"Access-Control-Allow-Headers: X-Requested-With\");\n }\n <\/code><\/pre>\n4. \ud504\ub860\ud2b8\uc5d4\ub4dc \ucf54\ub4dc \uad6c\ud604<\/h2>\n\uc774\uc81c React.js\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud504\ub860\ud2b8\uc5d4\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ud604\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. React \uc571\uc744 \uc0dd\uc131\ud558\uae30 \uc704\ud574 Create React App\uc744 \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c \uba85\ub839\uc5b4\ub85c \uc0c8\ub85c\uc6b4 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\nnpx create-react-app headless-wp-client<\/code><\/pre>\n\uc0dd\uc131\ub41c React \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud55c \ud6c4, npm start<\/code> \uba85\ub839\uc73c\ub85c \uac1c\ubc1c \uc11c\ubc84\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n4.1 \uac8c\uc2dc\ubb3c \ubaa9\ub85d \uac00\uc838\uc624\uae30<\/h3>\n\uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c \uac8c\uc2dc\ubb3c\uc744 \uac00\uc838\uc624\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 axios<\/code> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. axios<\/code>\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\nnpm install axios<\/code><\/pre>\n\uc774\uc81c App.js<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud558\uc5ec \uac8c\uc2dc\ubb3c \ubaa9\ub85d\uc744 \uac00\uc838\uc624\ub3c4\ub85d \ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() => {\n const fetchPosts = async () => {\n const result = await axios(\n 'https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts',\n );\n setPosts(result.data);\n };\n fetchPosts();\n }, []);\n\n return (\n \n \uc6cc\ub4dc\ud504\ub808\uc2a4 \uac8c\uc2dc\ubb3c \ubaa9\ub85d<\/h1>\n \n {posts.map(post => (\n \n \n {post.title.rendered}\n <\/a>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n4.2 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ubcf4\uae30<\/h3>\n\uac8c\uc2dc\ubb3c\uc758 \uc0c1\uc138 \ubcf4\uae30\ub97c \uc704\ud574, \uac8c\uc2dc\ubb3c ID\ub97c \uae30\ubc18\uc73c\ub85c \ucd94\uac00\uc801\uc778 API \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Router\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\nnpm install react-router-dom<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
PUT \/wp-json\/wp\/v2\/posts\/{id}<\/code>: \uac8c\uc2dc\ubb3c \uc218\uc815<\/li>\nDELETE \/wp-json\/wp\/v2\/posts\/{id}<\/code>: \uac8c\uc2dc\ubb3c \uc0ad\uc81c<\/li>\n<\/ul>\n3. \ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4 \uc124\uc815\ud558\uae30<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub97c \uad6c\ud604\ud558\uae30 \uc704\ud574\uc11c\ub294 WP REST API\ub97c \ud65c\uc131\ud654\ud558\uace0, \uc774\ub97c \ud65c\uc6a9\ud558\uae30 \uc704\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \ucf54\ub4dc\ub97c \uc791\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. \ub2e4\uc74c \ub2e8\uacc4\uc5d0 \ub530\ub77c \ud5e4\ub4dc\ub9ac\uc2a4 \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \uc124\uc815\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n3.1 WP REST API \ud65c\uc131\ud654<\/h3>\n\uae30\ubcf8\uc801\uc73c\ub85c \ucd5c\uc2e0 \ubc84\uc804\uc758 \uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c\ub294 WP REST API\uac00 \ud65c\uc131\ud654\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \uc0ac\uc6a9 \uc911\uc778 \ud14c\ub9c8\ub098 \ud50c\ub7ec\uadf8\uc778\uc5d0 \ub530\ub77c API\uc758 \uc811\uadfc \uc81c\ud55c\uc774 \uc788\uc744 \uc218 \uc788\uc73c\ubbc0\ub85c \ud655\uc778\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n3.2 CORS \uc124\uc815<\/h3>\n\ud504\ub860\ud2b8\uc5d4\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uacfc \uc6cc\ub4dc\ud504\ub808\uc2a4 \uc11c\ubc84\uac00 \uc11c\ub85c \ub2e4\ub978 \ucd9c\ucc98(origin)\uc77c \uacbd\uc6b0, CORS(Cross-Origin Resource Sharing)\ub97c \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 API \uc694\uccad\uc774 \uac00\ub2a5\ud558\uac8c \ub429\ub2c8\ub2e4. \uc6cc\ub4dc\ud504\ub808\uc2a4\uc758 functions.php\uc5d0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec CORS\ub97c \ud5c8\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n\n add_action('init', 'add_cors_http_header');\n function add_cors_http_header(){\n header(\"Access-Control-Allow-Origin: *\");\n header(\"Access-Control-Allow-Headers: X-Requested-With\");\n }\n <\/code><\/pre>\n4. \ud504\ub860\ud2b8\uc5d4\ub4dc \ucf54\ub4dc \uad6c\ud604<\/h2>\n\uc774\uc81c React.js\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud504\ub860\ud2b8\uc5d4\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ud604\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. React \uc571\uc744 \uc0dd\uc131\ud558\uae30 \uc704\ud574 Create React App\uc744 \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c \uba85\ub839\uc5b4\ub85c \uc0c8\ub85c\uc6b4 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\nnpx create-react-app headless-wp-client<\/code><\/pre>\n\uc0dd\uc131\ub41c React \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud55c \ud6c4, npm start<\/code> \uba85\ub839\uc73c\ub85c \uac1c\ubc1c \uc11c\ubc84\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n4.1 \uac8c\uc2dc\ubb3c \ubaa9\ub85d \uac00\uc838\uc624\uae30<\/h3>\n\uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c \uac8c\uc2dc\ubb3c\uc744 \uac00\uc838\uc624\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 axios<\/code> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. axios<\/code>\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\nnpm install axios<\/code><\/pre>\n\uc774\uc81c App.js<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud558\uc5ec \uac8c\uc2dc\ubb3c \ubaa9\ub85d\uc744 \uac00\uc838\uc624\ub3c4\ub85d \ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() => {\n const fetchPosts = async () => {\n const result = await axios(\n 'https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts',\n );\n setPosts(result.data);\n };\n fetchPosts();\n }, []);\n\n return (\n \n \uc6cc\ub4dc\ud504\ub808\uc2a4 \uac8c\uc2dc\ubb3c \ubaa9\ub85d<\/h1>\n \n {posts.map(post => (\n \n \n {post.title.rendered}\n <\/a>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n4.2 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ubcf4\uae30<\/h3>\n\uac8c\uc2dc\ubb3c\uc758 \uc0c1\uc138 \ubcf4\uae30\ub97c \uc704\ud574, \uac8c\uc2dc\ubb3c ID\ub97c \uae30\ubc18\uc73c\ub85c \ucd94\uac00\uc801\uc778 API \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Router\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\nnpm install react-router-dom<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
DELETE \/wp-json\/wp\/v2\/posts\/{id}<\/code>: \uac8c\uc2dc\ubb3c \uc0ad\uc81c<\/li>\n<\/ul>\n3. \ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4 \uc124\uc815\ud558\uae30<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub97c \uad6c\ud604\ud558\uae30 \uc704\ud574\uc11c\ub294 WP REST API\ub97c \ud65c\uc131\ud654\ud558\uace0, \uc774\ub97c \ud65c\uc6a9\ud558\uae30 \uc704\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \ucf54\ub4dc\ub97c \uc791\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. \ub2e4\uc74c \ub2e8\uacc4\uc5d0 \ub530\ub77c \ud5e4\ub4dc\ub9ac\uc2a4 \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \uc124\uc815\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n3.1 WP REST API \ud65c\uc131\ud654<\/h3>\n\uae30\ubcf8\uc801\uc73c\ub85c \ucd5c\uc2e0 \ubc84\uc804\uc758 \uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c\ub294 WP REST API\uac00 \ud65c\uc131\ud654\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \uc0ac\uc6a9 \uc911\uc778 \ud14c\ub9c8\ub098 \ud50c\ub7ec\uadf8\uc778\uc5d0 \ub530\ub77c API\uc758 \uc811\uadfc \uc81c\ud55c\uc774 \uc788\uc744 \uc218 \uc788\uc73c\ubbc0\ub85c \ud655\uc778\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n3.2 CORS \uc124\uc815<\/h3>\n\ud504\ub860\ud2b8\uc5d4\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uacfc \uc6cc\ub4dc\ud504\ub808\uc2a4 \uc11c\ubc84\uac00 \uc11c\ub85c \ub2e4\ub978 \ucd9c\ucc98(origin)\uc77c \uacbd\uc6b0, CORS(Cross-Origin Resource Sharing)\ub97c \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 API \uc694\uccad\uc774 \uac00\ub2a5\ud558\uac8c \ub429\ub2c8\ub2e4. \uc6cc\ub4dc\ud504\ub808\uc2a4\uc758 functions.php\uc5d0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec CORS\ub97c \ud5c8\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n\n add_action('init', 'add_cors_http_header');\n function add_cors_http_header(){\n header(\"Access-Control-Allow-Origin: *\");\n header(\"Access-Control-Allow-Headers: X-Requested-With\");\n }\n <\/code><\/pre>\n4. \ud504\ub860\ud2b8\uc5d4\ub4dc \ucf54\ub4dc \uad6c\ud604<\/h2>\n\uc774\uc81c React.js\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud504\ub860\ud2b8\uc5d4\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ud604\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. React \uc571\uc744 \uc0dd\uc131\ud558\uae30 \uc704\ud574 Create React App\uc744 \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c \uba85\ub839\uc5b4\ub85c \uc0c8\ub85c\uc6b4 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\nnpx create-react-app headless-wp-client<\/code><\/pre>\n\uc0dd\uc131\ub41c React \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud55c \ud6c4, npm start<\/code> \uba85\ub839\uc73c\ub85c \uac1c\ubc1c \uc11c\ubc84\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n4.1 \uac8c\uc2dc\ubb3c \ubaa9\ub85d \uac00\uc838\uc624\uae30<\/h3>\n\uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c \uac8c\uc2dc\ubb3c\uc744 \uac00\uc838\uc624\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 axios<\/code> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. axios<\/code>\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\nnpm install axios<\/code><\/pre>\n\uc774\uc81c App.js<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud558\uc5ec \uac8c\uc2dc\ubb3c \ubaa9\ub85d\uc744 \uac00\uc838\uc624\ub3c4\ub85d \ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() => {\n const fetchPosts = async () => {\n const result = await axios(\n 'https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts',\n );\n setPosts(result.data);\n };\n fetchPosts();\n }, []);\n\n return (\n \n \uc6cc\ub4dc\ud504\ub808\uc2a4 \uac8c\uc2dc\ubb3c \ubaa9\ub85d<\/h1>\n \n {posts.map(post => (\n \n \n {post.title.rendered}\n <\/a>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n4.2 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ubcf4\uae30<\/h3>\n\uac8c\uc2dc\ubb3c\uc758 \uc0c1\uc138 \ubcf4\uae30\ub97c \uc704\ud574, \uac8c\uc2dc\ubb3c ID\ub97c \uae30\ubc18\uc73c\ub85c \ucd94\uac00\uc801\uc778 API \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Router\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\nnpm install react-router-dom<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub97c \uad6c\ud604\ud558\uae30 \uc704\ud574\uc11c\ub294 WP REST API\ub97c \ud65c\uc131\ud654\ud558\uace0, \uc774\ub97c \ud65c\uc6a9\ud558\uae30 \uc704\ud55c \ud504\ub860\ud2b8\uc5d4\ub4dc \ucf54\ub4dc\ub97c \uc791\uc131\ud574\uc57c \ud569\ub2c8\ub2e4. \ub2e4\uc74c \ub2e8\uacc4\uc5d0 \ub530\ub77c \ud5e4\ub4dc\ub9ac\uc2a4 \ud074\ub77c\uc774\uc5b8\ud2b8\ub97c \uc124\uc815\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n
\uae30\ubcf8\uc801\uc73c\ub85c \ucd5c\uc2e0 \ubc84\uc804\uc758 \uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c\ub294 WP REST API\uac00 \ud65c\uc131\ud654\ub418\uc5b4 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7ec\ub098 \uc0ac\uc6a9 \uc911\uc778 \ud14c\ub9c8\ub098 \ud50c\ub7ec\uadf8\uc778\uc5d0 \ub530\ub77c API\uc758 \uc811\uadfc \uc81c\ud55c\uc774 \uc788\uc744 \uc218 \uc788\uc73c\ubbc0\ub85c \ud655\uc778\uc774 \ud544\uc694\ud569\ub2c8\ub2e4.<\/p>\n
\ud504\ub860\ud2b8\uc5d4\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uacfc \uc6cc\ub4dc\ud504\ub808\uc2a4 \uc11c\ubc84\uac00 \uc11c\ub85c \ub2e4\ub978 \ucd9c\ucc98(origin)\uc77c \uacbd\uc6b0, CORS(Cross-Origin Resource Sharing)\ub97c \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 API \uc694\uccad\uc774 \uac00\ub2a5\ud558\uac8c \ub429\ub2c8\ub2e4. \uc6cc\ub4dc\ud504\ub808\uc2a4\uc758 functions.php\uc5d0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec CORS\ub97c \ud5c8\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4:<\/p>\n
\n add_action('init', 'add_cors_http_header');\n function add_cors_http_header(){\n header(\"Access-Control-Allow-Origin: *\");\n header(\"Access-Control-Allow-Headers: X-Requested-With\");\n }\n <\/code><\/pre>\n4. \ud504\ub860\ud2b8\uc5d4\ub4dc \ucf54\ub4dc \uad6c\ud604<\/h2>\n\uc774\uc81c React.js\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud504\ub860\ud2b8\uc5d4\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ud604\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. React \uc571\uc744 \uc0dd\uc131\ud558\uae30 \uc704\ud574 Create React App\uc744 \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c \uba85\ub839\uc5b4\ub85c \uc0c8\ub85c\uc6b4 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\nnpx create-react-app headless-wp-client<\/code><\/pre>\n\uc0dd\uc131\ub41c React \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud55c \ud6c4, npm start<\/code> \uba85\ub839\uc73c\ub85c \uac1c\ubc1c \uc11c\ubc84\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n4.1 \uac8c\uc2dc\ubb3c \ubaa9\ub85d \uac00\uc838\uc624\uae30<\/h3>\n\uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c \uac8c\uc2dc\ubb3c\uc744 \uac00\uc838\uc624\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 axios<\/code> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. axios<\/code>\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\nnpm install axios<\/code><\/pre>\n\uc774\uc81c App.js<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud558\uc5ec \uac8c\uc2dc\ubb3c \ubaa9\ub85d\uc744 \uac00\uc838\uc624\ub3c4\ub85d \ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() => {\n const fetchPosts = async () => {\n const result = await axios(\n 'https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts',\n );\n setPosts(result.data);\n };\n fetchPosts();\n }, []);\n\n return (\n \n \uc6cc\ub4dc\ud504\ub808\uc2a4 \uac8c\uc2dc\ubb3c \ubaa9\ub85d<\/h1>\n \n {posts.map(post => (\n \n \n {post.title.rendered}\n <\/a>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n4.2 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ubcf4\uae30<\/h3>\n\uac8c\uc2dc\ubb3c\uc758 \uc0c1\uc138 \ubcf4\uae30\ub97c \uc704\ud574, \uac8c\uc2dc\ubb3c ID\ub97c \uae30\ubc18\uc73c\ub85c \ucd94\uac00\uc801\uc778 API \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Router\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\nnpm install react-router-dom<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
\uc774\uc81c React.js\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud504\ub860\ud2b8\uc5d4\ub4dc \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ud604\ud574\ubcf4\uaca0\uc2b5\ub2c8\ub2e4. React \uc571\uc744 \uc0dd\uc131\ud558\uae30 \uc704\ud574 Create React App\uc744 \uc0ac\uc6a9\ud558\uaca0\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c \uba85\ub839\uc5b4\ub85c \uc0c8\ub85c\uc6b4 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.<\/p>\n
npx create-react-app headless-wp-client<\/code><\/pre>\n\uc0dd\uc131\ub41c React \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud55c \ud6c4, npm start<\/code> \uba85\ub839\uc73c\ub85c \uac1c\ubc1c \uc11c\ubc84\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n4.1 \uac8c\uc2dc\ubb3c \ubaa9\ub85d \uac00\uc838\uc624\uae30<\/h3>\n\uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c \uac8c\uc2dc\ubb3c\uc744 \uac00\uc838\uc624\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 axios<\/code> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. axios<\/code>\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\nnpm install axios<\/code><\/pre>\n\uc774\uc81c App.js<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud558\uc5ec \uac8c\uc2dc\ubb3c \ubaa9\ub85d\uc744 \uac00\uc838\uc624\ub3c4\ub85d \ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() => {\n const fetchPosts = async () => {\n const result = await axios(\n 'https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts',\n );\n setPosts(result.data);\n };\n fetchPosts();\n }, []);\n\n return (\n \n \uc6cc\ub4dc\ud504\ub808\uc2a4 \uac8c\uc2dc\ubb3c \ubaa9\ub85d<\/h1>\n \n {posts.map(post => (\n \n \n {post.title.rendered}\n <\/a>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n4.2 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ubcf4\uae30<\/h3>\n\uac8c\uc2dc\ubb3c\uc758 \uc0c1\uc138 \ubcf4\uae30\ub97c \uc704\ud574, \uac8c\uc2dc\ubb3c ID\ub97c \uae30\ubc18\uc73c\ub85c \ucd94\uac00\uc801\uc778 API \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Router\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\nnpm install react-router-dom<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
\uc0dd\uc131\ub41c React \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud55c \ud6c4, npm start<\/code> \uba85\ub839\uc73c\ub85c \uac1c\ubc1c \uc11c\ubc84\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n4.1 \uac8c\uc2dc\ubb3c \ubaa9\ub85d \uac00\uc838\uc624\uae30<\/h3>\n\uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c \uac8c\uc2dc\ubb3c\uc744 \uac00\uc838\uc624\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 axios<\/code> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. axios<\/code>\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\nnpm install axios<\/code><\/pre>\n\uc774\uc81c App.js<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud558\uc5ec \uac8c\uc2dc\ubb3c \ubaa9\ub85d\uc744 \uac00\uc838\uc624\ub3c4\ub85d \ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() => {\n const fetchPosts = async () => {\n const result = await axios(\n 'https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts',\n );\n setPosts(result.data);\n };\n fetchPosts();\n }, []);\n\n return (\n \n \uc6cc\ub4dc\ud504\ub808\uc2a4 \uac8c\uc2dc\ubb3c \ubaa9\ub85d<\/h1>\n \n {posts.map(post => (\n \n \n {post.title.rendered}\n <\/a>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n4.2 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ubcf4\uae30<\/h3>\n\uac8c\uc2dc\ubb3c\uc758 \uc0c1\uc138 \ubcf4\uae30\ub97c \uc704\ud574, \uac8c\uc2dc\ubb3c ID\ub97c \uae30\ubc18\uc73c\ub85c \ucd94\uac00\uc801\uc778 API \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Router\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\nnpm install react-router-dom<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
npm start<\/code> \uba85\ub839\uc73c\ub85c \uac1c\ubc1c \uc11c\ubc84\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n4.1 \uac8c\uc2dc\ubb3c \ubaa9\ub85d \uac00\uc838\uc624\uae30<\/h3>\n\uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c \uac8c\uc2dc\ubb3c\uc744 \uac00\uc838\uc624\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 axios<\/code> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. axios<\/code>\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\nnpm install axios<\/code><\/pre>\n\uc774\uc81c App.js<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud558\uc5ec \uac8c\uc2dc\ubb3c \ubaa9\ub85d\uc744 \uac00\uc838\uc624\ub3c4\ub85d \ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() => {\n const fetchPosts = async () => {\n const result = await axios(\n 'https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts',\n );\n setPosts(result.data);\n };\n fetchPosts();\n }, []);\n\n return (\n \n \uc6cc\ub4dc\ud504\ub808\uc2a4 \uac8c\uc2dc\ubb3c \ubaa9\ub85d<\/h1>\n \n {posts.map(post => (\n \n \n {post.title.rendered}\n <\/a>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n4.2 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ubcf4\uae30<\/h3>\n\uac8c\uc2dc\ubb3c\uc758 \uc0c1\uc138 \ubcf4\uae30\ub97c \uc704\ud574, \uac8c\uc2dc\ubb3c ID\ub97c \uae30\ubc18\uc73c\ub85c \ucd94\uac00\uc801\uc778 API \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Router\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\nnpm install react-router-dom<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
\uc6cc\ub4dc\ud504\ub808\uc2a4\uc5d0\uc11c \uac8c\uc2dc\ubb3c\uc744 \uac00\uc838\uc624\ub294 \uae30\ub2a5\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 axios<\/code> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. axios<\/code>\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\nnpm install axios<\/code><\/pre>\n\uc774\uc81c App.js<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud558\uc5ec \uac8c\uc2dc\ubb3c \ubaa9\ub85d\uc744 \uac00\uc838\uc624\ub3c4\ub85d \ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() => {\n const fetchPosts = async () => {\n const result = await axios(\n 'https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts',\n );\n setPosts(result.data);\n };\n fetchPosts();\n }, []);\n\n return (\n \n \uc6cc\ub4dc\ud504\ub808\uc2a4 \uac8c\uc2dc\ubb3c \ubaa9\ub85d<\/h1>\n \n {posts.map(post => (\n \n \n {post.title.rendered}\n <\/a>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n4.2 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ubcf4\uae30<\/h3>\n\uac8c\uc2dc\ubb3c\uc758 \uc0c1\uc138 \ubcf4\uae30\ub97c \uc704\ud574, \uac8c\uc2dc\ubb3c ID\ub97c \uae30\ubc18\uc73c\ub85c \ucd94\uac00\uc801\uc778 API \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Router\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\nnpm install react-router-dom<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
axios<\/code> \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4. axios<\/code>\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\nnpm install axios<\/code><\/pre>\n\uc774\uc81c App.js<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud558\uc5ec \uac8c\uc2dc\ubb3c \ubaa9\ub85d\uc744 \uac00\uc838\uc624\ub3c4\ub85d \ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() => {\n const fetchPosts = async () => {\n const result = await axios(\n 'https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts',\n );\n setPosts(result.data);\n };\n fetchPosts();\n }, []);\n\n return (\n \n \uc6cc\ub4dc\ud504\ub808\uc2a4 \uac8c\uc2dc\ubb3c \ubaa9\ub85d<\/h1>\n \n {posts.map(post => (\n \n \n {post.title.rendered}\n <\/a>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n4.2 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ubcf4\uae30<\/h3>\n\uac8c\uc2dc\ubb3c\uc758 \uc0c1\uc138 \ubcf4\uae30\ub97c \uc704\ud574, \uac8c\uc2dc\ubb3c ID\ub97c \uae30\ubc18\uc73c\ub85c \ucd94\uac00\uc801\uc778 API \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Router\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\nnpm install react-router-dom<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
axios<\/code>\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:<\/p>\nnpm install axios<\/code><\/pre>\n\uc774\uc81c App.js<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud558\uc5ec \uac8c\uc2dc\ubb3c \ubaa9\ub85d\uc744 \uac00\uc838\uc624\ub3c4\ub85d \ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() => {\n const fetchPosts = async () => {\n const result = await axios(\n 'https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts',\n );\n setPosts(result.data);\n };\n fetchPosts();\n }, []);\n\n return (\n \n \uc6cc\ub4dc\ud504\ub808\uc2a4 \uac8c\uc2dc\ubb3c \ubaa9\ub85d<\/h1>\n \n {posts.map(post => (\n \n \n {post.title.rendered}\n <\/a>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n4.2 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ubcf4\uae30<\/h3>\n\uac8c\uc2dc\ubb3c\uc758 \uc0c1\uc138 \ubcf4\uae30\ub97c \uc704\ud574, \uac8c\uc2dc\ubb3c ID\ub97c \uae30\ubc18\uc73c\ub85c \ucd94\uac00\uc801\uc778 API \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Router\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\nnpm install react-router-dom<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
npm install axios<\/code><\/pre>\n\uc774\uc81c App.js<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud558\uc5ec \uac8c\uc2dc\ubb3c \ubaa9\ub85d\uc744 \uac00\uc838\uc624\ub3c4\ub85d \ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() => {\n const fetchPosts = async () => {\n const result = await axios(\n 'https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts',\n );\n setPosts(result.data);\n };\n fetchPosts();\n }, []);\n\n return (\n \n \uc6cc\ub4dc\ud504\ub808\uc2a4 \uac8c\uc2dc\ubb3c \ubaa9\ub85d<\/h1>\n \n {posts.map(post => (\n \n \n {post.title.rendered}\n <\/a>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n4.2 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ubcf4\uae30<\/h3>\n\uac8c\uc2dc\ubb3c\uc758 \uc0c1\uc138 \ubcf4\uae30\ub97c \uc704\ud574, \uac8c\uc2dc\ubb3c ID\ub97c \uae30\ubc18\uc73c\ub85c \ucd94\uac00\uc801\uc778 API \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Router\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\nnpm install react-router-dom<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
\uc774\uc81c App.js<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud558\uc5ec \uac8c\uc2dc\ubb3c \ubaa9\ub85d\uc744 \uac00\uc838\uc624\ub3c4\ub85d \ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() => {\n const fetchPosts = async () => {\n const result = await axios(\n 'https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts',\n );\n setPosts(result.data);\n };\n fetchPosts();\n }, []);\n\n return (\n \n \uc6cc\ub4dc\ud504\ub808\uc2a4 \uac8c\uc2dc\ubb3c \ubaa9\ub85d<\/h1>\n \n {posts.map(post => (\n \n \n {post.title.rendered}\n <\/a>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n4.2 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ubcf4\uae30<\/h3>\n\uac8c\uc2dc\ubb3c\uc758 \uc0c1\uc138 \ubcf4\uae30\ub97c \uc704\ud574, \uac8c\uc2dc\ubb3c ID\ub97c \uae30\ubc18\uc73c\ub85c \ucd94\uac00\uc801\uc778 API \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Router\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\nnpm install react-router-dom<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
App.js<\/code> \ud30c\uc77c\uc744 \ub2e4\uc74c\uacfc \uac19\uc774 \uc218\uc815\ud558\uc5ec \uac8c\uc2dc\ubb3c \ubaa9\ub85d\uc744 \uac00\uc838\uc624\ub3c4\ub85d \ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() => {\n const fetchPosts = async () => {\n const result = await axios(\n 'https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts',\n );\n setPosts(result.data);\n };\n fetchPosts();\n }, []);\n\n return (\n \n \uc6cc\ub4dc\ud504\ub808\uc2a4 \uac8c\uc2dc\ubb3c \ubaa9\ub85d<\/h1>\n \n {posts.map(post => (\n \n \n {post.title.rendered}\n <\/a>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n4.2 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ubcf4\uae30<\/h3>\n\uac8c\uc2dc\ubb3c\uc758 \uc0c1\uc138 \ubcf4\uae30\ub97c \uc704\ud574, \uac8c\uc2dc\ubb3c ID\ub97c \uae30\ubc18\uc73c\ub85c \ucd94\uac00\uc801\uc778 API \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Router\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\nnpm install react-router-dom<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function App() {\n const [posts, setPosts] = useState([]);\n\n useEffect(() => {\n const fetchPosts = async () => {\n const result = await axios(\n 'https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts',\n );\n setPosts(result.data);\n };\n fetchPosts();\n }, []);\n\n return (\n \n \uc6cc\ub4dc\ud504\ub808\uc2a4 \uac8c\uc2dc\ubb3c \ubaa9\ub85d<\/h1>\n \n {posts.map(post => (\n \n \n {post.title.rendered}\n <\/a>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n }\n\n export default App;\n <\/code><\/pre>\n4.2 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ubcf4\uae30<\/h3>\n\uac8c\uc2dc\ubb3c\uc758 \uc0c1\uc138 \ubcf4\uae30\ub97c \uc704\ud574, \uac8c\uc2dc\ubb3c ID\ub97c \uae30\ubc18\uc73c\ub85c \ucd94\uac00\uc801\uc778 API \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Router\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\nnpm install react-router-dom<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
\uac8c\uc2dc\ubb3c\uc758 \uc0c1\uc138 \ubcf4\uae30\ub97c \uc704\ud574, \uac8c\uc2dc\ubb3c ID\ub97c \uae30\ubc18\uc73c\ub85c \ucd94\uac00\uc801\uc778 API \uc694\uccad\uc744 \ucc98\ub9ac\ud569\ub2c8\ub2e4. React Router\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub77c\uc6b0\ud305\uc744 \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. React Router\ub97c \uc124\uce58\ud558\ub824\uba74 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4:<\/p>\n
npm install react-router-dom<\/code><\/pre>\n\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
\uadf8 \ub2e4\uc74c, \uc544\ub798\uc640 \uac19\uc740 \uad6c\uc870\ub85c \ub77c\uc6b0\ud130\ub97c \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n
\n import React from 'react';\n import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\n import App from '.\/App';\n import Post from '.\/Post';\n\n function Routes() {\n return (\n \n \n <\/route>\n <\/route>\n <\/switch>\n <\/router>\n );\n }\n\n export default Routes;\n <\/code><\/pre>\n4.3 \uac8c\uc2dc\ubb3c \uc0c1\uc138 \ucef4\ud3ec\ub10c\ud2b8 \uad6c\ud604<\/h3>\nPost.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
Post.js<\/code>\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec \ud2b9\uc815 \uac8c\uc2dc\ubb3c\uc744 API\ub85c \uac00\uc838\uc624\ub3c4\ub85d \uc124\uc815\ud569\ub2c8\ub2e4:<\/p>\n\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
\n import React, { useEffect, useState } from 'react';\n import axios from 'axios';\n\n function Post({ match }) {\n const [post, setPost] = useState(null);\n\n useEffect(() => {\n const fetchPost = async () => {\n const result = await axios(\n `https:\/\/your-wordpress-site.com\/wp-json\/wp\/v2\/posts\/${match.params.id}`,\n );\n setPost(result.data);\n };\n fetchPost();\n }, [match.params.id]);\n\n if (!post) return Loading...<\/div>;\n\n return (\n \n {post.title.rendered}<\/h1>\n <\/div>\n <\/div>\n );\n }\n\n export default Post;\n <\/code><\/pre>\n5. \uacb0\ub860<\/h2>\n\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n6. \ucd94\uac00 \ub9ac\uc18c\uc2a4<\/h2>\n\nWP REST API Documentation<\/a><\/li>\nReact Documentation<\/a><\/li>\nReact Router Documentation<\/a><\/li>\n<\/ul>\n
\ud5e4\ub4dc\ub9ac\uc2a4 \uc6cc\ub4dc\ud504\ub808\uc2a4\ub294 \ub354 \ub098\uc740 \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uacfc \uc131\ub2a5\uc744 \uc81c\uacf5\ud560 \uc218 \uc788\ub294 \uc720\uc5f0\ud55c \ud574\uacb0\ucc45\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. WP REST API\ub97c \uc774\uc6a9\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc678\ubd80 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc694\uccad\ud558\uace0, \ud544\uc694\ud55c \uc7a5\uc18c\uc5d0\uc11c \uc790\uc720\ub86d\uac8c \ub80c\ub354\ub9c1\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub294 \ub3d9\uc801\uc778 \uc6f9\uc0ac\uc774\ud2b8\ub098 \uc571\uc744 \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac15\ub825\ud55c \uc7a5\uc810\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \ub610\ud55c, \uc704\uc758 \uc608\uc81c\ub97c \ud1b5\ud574 \uae30\ubcf8\uc801\uc778 \uc124\uc815 \ubc0f \ud234\uc744 \uc774\ud574\ud558\uace0 \ud65c\uc6a9\ud560 \uc218 \uc788\ub294 \uae38\uc7a1\uc774\uac00 \ub418\uae30\ub97c \ubc14\ub78d\ub2c8\ub2e4.<\/p>\n