{"id":12,"date":"2025-07-16T13:42:46","date_gmt":"2025-07-16T04:42:46","guid":{"rendered":"https:\/\/34.64.61.65\/?p=12"},"modified":"2025-07-16T14:42:11","modified_gmt":"2025-07-16T05:42:11","slug":"react_%ec%8b%a4%ec%a0%84_%ea%b0%80%ec%9d%b4%eb%93%9c_%ec%a4%91%ea%b8%89","status":"publish","type":"post","link":"https:\/\/hed-g.me\/?p=12","title":{"rendered":"React \uc2e4\uc804 \uac00\uc774\ub4dc:\uc911\uae09"},"content":{"rendered":"\n<p>React \uc785\ubb38 \uac00\uc774\ub4dc\ub97c \ud1b5\ud574 \uae30\ubcf8\uae30\ub97c \ub2e4\uc9c0\uc168\ub2e4\uba74, \uc774\uc81c \ud55c \ub2e8\uacc4 \ub354 \ub098\uc544\uac08 \uc2dc\uac04\uc785\ub2c8\ub2e4. \uc774 \uc911\uae09 \uac00\uc774\ub4dc\uc5d0\uc11c\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud558\uace0, \ub354 \ubcf5\uc7a1\ud55c \ub370\uc774\ud130\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \ub2e4\ub8e8\uba70, \ucf54\ub4dc\uc758 \ud488\uc9c8\uc744 \ub192\uc774\ub294 \uc2e4\uc804\uc801\uc778 \uae30\uc220\ub4e4\uc744 \ub2e4\ub8f9\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\ubaa9\ucc28<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><p><strong>Hooks \uc2ec\ud654 \ud559\uc2b5: <code>useMemo<\/code>\uc640 <code>useCallback<\/code><\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li>\ubd88\ud544\uc694\ud55c \ub80c\ub354\ub9c1\uc740 \uc774\uc81c \uadf8\ub9cc!<\/li>\n\n\n\n<li>\uc5b8\uc81c \uc0ac\uc6a9\ud574\uc57c \ud560\uae4c?<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><p><strong>\ub370\uc774\ud130 \ud398\uce6d(Data Fetching) \ub9c8\uc2a4\ud130\ud558\uae30<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li><code>useEffect<\/code> + <code>Axios<\/code> \ud328\ud134\uc758 \ud55c\uacc4<\/li>\n\n\n\n<li>\uc11c\ubc84 \uc0c1\ud0dc \uad00\ub9ac\uc758 \uad6c\uc138\uc8fc: <code>React Query<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><p><strong>\uc131\ub2a5 \ucd5c\uc801\ud654\uc640 <code>React.memo<\/code><\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li><code>React.memo<\/code>\ub85c \ucef4\ud3ec\ub10c\ud2b8 \ub80c\ub354\ub9c1 \ucd5c\uc801\ud654\ud558\uae30<\/li>\n\n\n\n<li><code>useCallback<\/code>\uacfc\uc758 \uc2dc\ub108\uc9c0<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><p><strong>\ucef4\ud3ec\ub10c\ud2b8 \uc0dd\uba85\uc8fc\uae30(Lifecycle)\uc640 <code>useEffect<\/code><\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li><code>useEffect<\/code>\ub85c \uc0dd\uba85\uc8fc\uae30 \ud749\ub0b4 \ub0b4\uae30<\/li>\n\n\n\n<li>Clean-up \ud568\uc218: \uba54\ubaa8\ub9ac \ub204\uc218 \ubc29\uc9c0<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><p><strong>UI \ub77c\uc774\ube0c\ub7ec\ub9ac \ud65c\uc6a9<\/strong><\/p>\n<ul class=\"wp-block-list\">\n<li><code>Material-UI<\/code> (MUI)\ub85c \uac1c\ubc1c \uc18d\ub3c4 \ub192\uc774\uae30<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">1. Hooks \uc2ec\ud654 \ud559\uc2b5: <code>useMemo<\/code>\uc640 <code>useCallback<\/code><\/h2>\n\n\n\n<p><code>useState<\/code>\uc640 <code>useEffect<\/code>\uc5d0 \uc775\uc219\ud574\uc84c\ub2e4\uba74, \uc774\uc81c \uc131\ub2a5 \ucd5c\uc801\ud654\ub97c \uc704\ud55c Hooks\ub97c \ubc30\uc6b8 \ucc28\ub840\uc785\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><p><strong><code>useMemo<\/code><\/strong>: <strong>\uac12(value)\uc744 \uae30\uc5b5(memoization)<\/strong>\ud569\ub2c8\ub2e4. \ubcf5\uc7a1\ud55c \uc5f0\uc0b0\uc758 \uacb0\uacfc\uac12\uc744 \uc800\uc7a5\ud574\ub450\uace0, \uc758\uc874\uc131 \ubc30\uc5f4(<code>deps<\/code>)\uc758 \uac12\uc774 \ubcc0\uacbd\ub420 \ub54c\ub9cc \ub2e4\uc2dc \uacc4\uc0b0\ud569\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ubd88\ud544\uc694\ud55c \uc5f0\uc0b0\uc744 \uc904\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p><\/li>\n\n\n\n<li><p><strong><code>useCallback<\/code><\/strong>: <strong>\ud568\uc218(function)\ub97c \uae30\uc5b5<\/strong>\ud569\ub2c8\ub2e4. \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9ac\ub80c\ub354\ub9c1\ub420 \ub54c\ub9c8\ub2e4 \ud568\uc218\uac00 \uc0c8\ub85c \uc0dd\uc131\ub418\ub294 \uac83\uc744 \ubc29\uc9c0\ud569\ub2c8\ub2e4. \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc5d0 props\ub85c \ud568\uc218\ub97c \ub0b4\ub824\uc904 \ub54c, \ubd88\ud544\uc694\ud55c \ub9ac\ub80c\ub354\ub9c1\uc744 \ub9c9\ub294 \ub370 \ud2b9\ud788 \uc720\uc6a9\ud569\ub2c8\ub2e4.<\/p><\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import React, { useState, useMemo, useCallback } from 'react';\n\nfunction Calculator({ a, b }) {\n  \/\/ a \ub610\ub294 b\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9cc expensiveCalculation \ud568\uc218\uac00 \ub2e4\uc2dc \uc2e4\ud589\ub429\ub2c8\ub2e4.\n  const result = useMemo(() =&gt; expensiveCalculation(a, b), &#91;a, b]);\n\n  \/\/ \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9ac\ub80c\ub354\ub9c1 \ub418\uc5b4\ub3c4 \uc774 \ud568\uc218\ub294 \uc7ac\uc0dd\uc131\ub418\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.\n  const handleSave = useCallback(() =&gt; {\n    saveResult(result);\n  }, &#91;result]);\n\n  return (\n    &lt;div&gt;\n      &lt;p&gt;\uacb0\uacfc: {result}&lt;\/p&gt;\n      &lt;ChildComponent onSave={handleSave} \/&gt;\n    &lt;\/div&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">2. \ub370\uc774\ud130 \ud398\uce6d \ub9c8\uc2a4\ud130\ud558\uae30<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">2.1. <code>useEffect<\/code> + <code>Axios<\/code> \ud328\ud134\uc758 \ud55c\uacc4<\/h3>\n\n\n\n<p>\uc785\ubb38 \uacfc\uc815\uc5d0\uc11c \ubc30\uc6b4 <code>useEffect<\/code>\uc640 <code>Axios<\/code>\ub97c \uc0ac\uc6a9\ud55c \ub370\uc774\ud130 \ud398\uce6d\uc740 \uac04\ub2e8\ud55c \uc791\uc5c5\uc5d0\ub294 \uc720\uc6a9\ud558\uc9c0\ub9cc, \uc2e4\ubb34\uc5d0\uc11c\ub294 \uc5ec\ub7ec \ud55c\uacc4\uc5d0 \ubd80\ub52a\ud799\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\ub85c\ub529(loading), \uc5d0\ub7ec(error) \uc0c1\ud0dc\ub97c \uc9c1\uc811 <code>useState<\/code>\ub85c \uad00\ub9ac\ud574\uc57c \ud569\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\ub370\uc774\ud130 \uce90\uc2f1(caching)\uc774 \uc5c6\uc5b4, \uac19\uc740 \ub370\uc774\ud130\ub97c \uc5ec\ub7ec \ubc88 \uc694\uccad\ud558\uac8c \ub429\ub2c8\ub2e4.<\/li>\n\n\n\n<li>\ucf54\ub4dc\uac00 \uae38\uace0 \ubcf5\uc7a1\ud574\uc9c0\uae30 \uc27d\uc2b5\ub2c8\ub2e4.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2.2. \uc11c\ubc84 \uc0c1\ud0dc \uad00\ub9ac\uc758 \uad6c\uc138\uc8fc: <code>React Query<\/code><\/h3>\n\n\n\n<p><code>React Query<\/code>\ub294 \ub370\uc774\ud130 \ud398\uce6d, \uce90\uc2f1, \ub3d9\uae30\ud654, \uc11c\ubc84 \uc0c1\ud0dc \uc5c5\ub370\uc774\ud2b8 \ub4f1 \ube44\ub3d9\uae30 \uc791\uc5c5\uc744 \ub9e4\uc6b0 \uc27d\uac8c \ub9cc\ub4e4\uc5b4\uc8fc\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac\uc785\ub2c8\ub2e4. \ubcf4\uc77c\ub7ec\ud50c\ub808\uc774\ud2b8 \ucf54\ub4dc\ub97c \ub300\ud3ed \uc904\uc5ec\uc90d\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\uc8fc\uc694 \uc7a5\uc810<\/strong>:\n<ul class=\"wp-block-list\">\n<li>\ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \ub85c\uc9c1\uacfc UI \ub85c\uc9c1\uc744 \ubd84\ub9ac<\/li>\n\n\n\n<li>\uc790\ub3d9 \uce90\uc2f1 \ubc0f \ubc31\uadf8\ub77c\uc6b4\ub4dc \uc5c5\ub370\uc774\ud2b8<\/li>\n\n\n\n<li><code>isLoading<\/code>, <code>isError<\/code>, <code>data<\/code> \ub4f1\uc758 \uc0c1\ud0dc\ub97c \uc790\ub3d9\uc73c\ub85c \uc81c\uacf5<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>import { useQuery } from 'react-query';\nimport axios from 'axios';\n\n\/\/ \ub370\uc774\ud130\ub97c \uac00\uc838\uc624\ub294 \ud568\uc218\nconst fetchTodos = async () =&gt; {\n  const { data } = await axios.get('https:\/\/api.example.com\/todos');\n  return data;\n};\n\nfunction TodoList() {\n  \/\/ useQuery \ud6c5 \ud558\ub098\ub85c \ub85c\ub529, \uc5d0\ub7ec, \ub370\uc774\ud130 \uc0c1\ud0dc\ub97c \ubaa8\ub450 \uad00\ub9ac\ud569\ub2c8\ub2e4.\n  const { data: todos, isLoading, isError } = useQuery('todos', fetchTodos);\n\n  if (isLoading) return &lt;span&gt;Loading...&lt;\/span&gt;;\n  if (isError) return &lt;span&gt;Error fetching data&lt;\/span&gt;;\n\n  return (\n    &lt;ul&gt;\n      {todos.map(todo =&gt; &lt;li key={todo.id}&gt;{todo.title}&lt;\/li&gt;)}\n    &lt;\/ul&gt;\n  );\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">3. \uc131\ub2a5 \ucd5c\uc801\ud654\uc640 <code>React.memo<\/code><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">3.1. <code>React.memo<\/code>\ub85c \ucef4\ud3ec\ub10c\ud2b8 \ub80c\ub354\ub9c1 \ucd5c\uc801\ud654\ud558\uae30<\/h3>\n\n\n\n<p><code>React.memo<\/code>\ub294 \uace0\ucc28 \ucef4\ud3ec\ub10c\ud2b8(HOC, Higher-Order Component)\ub85c, \ucef4\ud3ec\ub10c\ud2b8\ub97c \uac10\uc2f8\uc11c <strong>props\uac00 \ubcc0\uacbd\ub418\uc9c0 \uc54a\uc73c\uba74 \ub9ac\ub80c\ub354\ub9c1\uc744 \ubc29\uc9c0<\/strong>\ud558\ub294 \uc5ed\ud560\uc744 \ud569\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const MyComponent = (props) =&gt; {\n  \/* \ub80c\ub354\ub9c1 \ub85c\uc9c1 *\/\n};\n\n\/\/ props\uac00 \ubcc0\uacbd\ub420 \ub54c\ub9cc MyComponent\uac00 \ub9ac\ub80c\ub354\ub9c1\ub429\ub2c8\ub2e4.\nexport default React.memo(MyComponent);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3.2. <code>useCallback<\/code>\uacfc\uc758 \uc2dc\ub108\uc9c0<\/h3>\n\n\n\n<p><code>React.memo<\/code>\ub97c \uc0ac\uc6a9\ud558\ub354\ub77c\ub3c4, props\ub85c \ud568\uc218\ub97c \ub0b4\ub824\uc8fc\ub294 \uacbd\uc6b0 \ubd80\ubaa8\uac00 \ub9ac\ub80c\ub354\ub9c1\ub420 \ub54c\ub9c8\ub2e4 \ud568\uc218\uac00 \uc0c8\ub85c \uc0dd\uc131\ub418\uc5b4 <code>React.memo<\/code>\uac00 \ubb34\uc6a9\uc9c0\ubb3c\uc774 \ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub54c <code>useCallback<\/code>\uc73c\ub85c \ud568\uc218\ub97c \uae30\uc5b5\uc2dc\ucf1c\uc8fc\uba74, <code>React.memo<\/code>\uac00 \uc81c\ub300\ub85c \ub3d9\uc791\ud558\uc5ec \ucd5c\uc801\ud654 \ud6a8\uacfc\ub97c \uadf9\ub300\ud654\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. \ucef4\ud3ec\ub10c\ud2b8 \uc0dd\uba85\uc8fc\uae30(Lifecycle)\uc640 <code>useEffect<\/code><\/h2>\n\n\n\n<p><code>useEffect<\/code>\uc758 \ub450 \ubc88\uc9f8 \uc778\uc790\uc778 \uc758\uc874\uc131 \ubc30\uc5f4(<code>deps<\/code>)\uc744 \uc5b4\ub5bb\uac8c \uc870\uc791\ud558\ub290\ub0d0\uc5d0 \ub530\ub77c \ud074\ub798\uc2a4\ud615 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc0dd\uba85\uc8fc\uae30 \uba54\uc11c\ub4dc\ub4e4\uc744 \ud749\ub0b4 \ub0bc \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>componentDidMount<\/code>: <code>useEffect(() => { ... }, [])<\/code> (\ube48 \ubc30\uc5f4)<\/li>\n\n\n\n<li><code>componentDidUpdate<\/code>: <code>useEffect(() => { ... }, [dep1, dep2])<\/code> (\uc758\uc874\uc131 \uc9c0\uc815)<\/li>\n\n\n\n<li><code>componentWillUnmount<\/code>: <code>useEffect(() => { return () => { ... } }, [])<\/code> (Clean-up \ud568\uc218 \ubc18\ud658)<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Clean-up \ud568\uc218: \uba54\ubaa8\ub9ac \ub204\uc218 \ubc29\uc9c0<\/h3>\n\n\n\n<p>\ucef4\ud3ec\ub10c\ud2b8\uac00 \uc0ac\ub77c\uc9c8 \ub54c(unmount) \uc2e4\ud589\ub418\ub294 <code>return<\/code> \ud568\uc218\ub294 \ub9e4\uc6b0 \uc911\uc694\ud569\ub2c8\ub2e4. <code>setInterval<\/code>, <code>setTimeout<\/code>\uc774\ub098 \uc678\ubd80 \ub77c\uc774\ube0c\ub7ec\ub9ac \uad6c\ub3c5 \ub4f1\uc744 \uc124\uc815\ud588\uc744 \ub54c, \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc0ac\ub77c\uc9c0\uae30 \uc804\uc5d0 \uc774\ub97c \ud574\uc81c\ud558\uc9c0 \uc54a\uc73c\uba74 \uba54\ubaa8\ub9ac \ub204\uc218\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>useEffect(() =&gt; {\n  const timerId = setInterval(() =&gt; {\n    console.log('Tick');\n  }, 1000);\n\n  \/\/ \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc5b8\ub9c8\uc6b4\ud2b8\ub420 \ub54c \ud0c0\uc774\uba38\ub97c \uc815\ub9ac\ud569\ub2c8\ub2e4.\n  return () =&gt; {\n    clearInterval(timerId);\n  };\n}, &#91;]);<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">5. UI \ub77c\uc774\ube0c\ub7ec\ub9ac \ud65c\uc6a9<\/h2>\n\n\n\n<p>\ubaa8\ub4e0 UI \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc9c1\uc811 \ub9cc\ub4dc\ub294 \uac83\uc740 \ube44\ud6a8\uc728\uc801\uc77c \uc218 \uc788\uc2b5\ub2c8\ub2e4. <code>Material-UI<\/code>(MUI), <code>Ant Design<\/code>, <code>Chakra UI<\/code> \uac19\uc740 UI \ub77c\uc774\ube0c\ub7ec\ub9ac\ub294 \uc798 \ub514\uc790\uc778\ub418\uace0 \uac80\uc99d\ub41c \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \uc81c\uacf5\ud558\uc5ec \uac1c\ubc1c \uc18d\ub3c4\ub97c \ube44\uc57d\uc801\uc73c\ub85c \ud5a5\uc0c1\uc2dc\ucf1c \uc90d\ub2c8\ub2e4.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\uc774\uc81c \uc5ec\ub7ec\ubd84\uc740 React\ub97c \uc880 \ub354 \uae4a\uc774 \uc788\uac8c \uc774\ud574\ud558\uace0, \ub354 \uacac\uace0\ud558\uace0 \uc131\ub2a5 \uc88b\uc740 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4 \uc900\ube44\uac00 \ub418\uc5c8\uc2b5\ub2c8\ub2e4. \ub2e4\uc74c \ub2e8\uacc4\ub85c\ub294 \uc804\uc5ed \uc0c1\ud0dc \uad00\ub9ac(Global State Management) \ub77c\uc774\ube0c\ub7ec\ub9ac\uc778 <code>Redux<\/code>\ub098 <code>Zustand<\/code> \ub4f1\uc744 \ud559\uc2b5\ud574\ubcf4\ub294 \uac83\uc744 \ucd94\ucc9c\ud569\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>React \uc785\ubb38 \uac00\uc774\ub4dc\ub97c \ud1b5\ud574 \uae30\ubcf8\uae30\ub97c \ub2e4\uc9c0\uc168\ub2e4\uba74, \uc774\uc81c \ud55c \ub2e8\uacc4 \ub354 \ub098\uc544\uac08 \uc2dc\uac04\uc785\ub2c8\ub2e4. \uc774 \uc911\uae09 \uac00\uc774\ub4dc\uc5d0\uc11c\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc131\ub2a5\uc744 \ucd5c\uc801\ud654\ud558\uace0, \ub354 \ubcf5\uc7a1\ud55c \ub370\uc774\ud130\ub97c \ud6a8\uc728\uc801\uc73c\ub85c \ub2e4\ub8e8\uba70, \ucf54\ub4dc\uc758 \ud488\uc9c8\uc744 \ub192\uc774\ub294 \uc2e4\uc804\uc801\uc778 \uae30\uc220\ub4e4\uc744 \ub2e4\ub8f9\ub2c8\ub2e4. \ubaa9\ucc28 1. Hooks \uc2ec\ud654 \ud559\uc2b5: useMemo\uc640 useCallback useState\uc640 useEffect\uc5d0 \uc775\uc219\ud574\uc84c\ub2e4\uba74, \uc774\uc81c \uc131\ub2a5 \ucd5c\uc801\ud654\ub97c \uc704\ud55c Hooks\ub97c \ubc30\uc6b8 \ucc28\ub840\uc785\ub2c8\ub2e4. 2. \ub370\uc774\ud130 \ud398\uce6d \ub9c8\uc2a4\ud130\ud558\uae30 2.1. useEffect + Axios \ud328\ud134\uc758 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[100,102,101],"class_list":["post-12","post","type-post","status-publish","format-standard","hentry","category-react","tag-react","tag-react-js","tag-101"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":4,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/12\/revisions"}],"predecessor-version":[{"id":78,"href":"https:\/\/hed-g.me\/index.php?rest_route=\/wp\/v2\/posts\/12\/revisions\/78"}],"wp:attachment":[{"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hed-g.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}