{"id":1645,"date":"2026-03-13T19:53:07","date_gmt":"2026-03-13T19:53:07","guid":{"rendered":"https:\/\/wayhope.kro.kr\/?p=1645"},"modified":"2026-08-31T07:32:34","modified_gmt":"2026-08-31T07:32:34","slug":"react-%ea%b0%9c%eb%b0%9c-%ed%95%b5%ec%8b%ac-%ec%a0%95%eb%a6%ac","status":"publish","type":"post","link":"https:\/\/wayhope.kro.kr\/?p=1645","title":{"rendered":"React \uac1c\ubc1c \ud575\uc2ec \uc815\ub9ac"},"content":{"rendered":"\n

React \uac1c\ubc1c \ud575\uc2ec \uc815\ub9ac<\/h1>\n\n\n\n

React\ub97c \ucc98\uc74c \ubc30\uc6b0\uba74 \ucef4\ud3ec\ub10c\ud2b8\uc640 JSX\ubd80\ud130 \uc811\ud558\uac8c \ub41c\ub2e4.<\/p>\n\n\n\n

\ud558\uc9c0\ub9cc React\ub97c \uc81c\ub300\ub85c \uc774\ud574\ud558\ub824\uba74 \ubb38\ubc95\ubcf4\ub2e4 \uc0c1\ud0dc\uac00 \uc5b4\ub5bb\uac8c UI\ub85c \uc5f0\uacb0\ub418\uace0 \ub2e4\uc2dc \uc0c1\ud0dc \ubcc0\uacbd\uc73c\ub85c \ub3cc\uc544\uc624\ub294\uc9c0<\/strong>\ub97c \uba3c\uc800 \uc774\ud574\ud558\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n

React\uc758 \ud575\uc2ec\uc740 \uc0c1\ud0dc\ub97c \uae30\ubc18\uc73c\ub85c UI\ub97c \uc120\uc5b8\ud558\ub294 \uac83<\/strong>\uc774\ub2e4.<\/p>\n\n\n\n

State -> Render -> UI -> User Event -> State Update -> Render\n<\/code><\/pre>\n\n\n\n
\uac1c\ubc1c\uc790\uac00 DOM\uc744 \uc9c1\uc811 \ucc3e\uc544 \uc218\uc815\ud558\ub294 \ub300\uc2e0 \ud604\uc7ac \uc0c1\ud0dc\uc5d0\uc11c \uc5b4\ub5a4 UI\uac00 \ub9cc\ub4e4\uc5b4\uc838\uc57c \ud558\ub294\uc9c0\ub97c \uc791\uc131\ud55c\ub2e4. React\ub294 \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\uba74 \uc0c8\ub85c\uc6b4 UI\ub97c \uacc4\uc0b0\ud558\uace0 \ud544\uc694\ud55c DOM \ubcc0\uacbd\uc744 \ubc18\uc601\ud55c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
React\uc758 \uae30\ubcf8 \uad6c\uc870<\/h2>\n\n\n\n
React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc740 \uc5ec\ub7ec \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc870\ud569\ud574\uc11c \ud558\ub098\uc758 UI\ub97c \ub9cc\ub4e0\ub2e4.<\/p>\n\n\n\n
function App() {\n  return (\n    <div>\n      <Header \/>\n      <Main \/>\n      <Footer \/>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n
\ucef4\ud3ec\ub10c\ud2b8 \uad00\uacc4\ub294 \ub2e4\uc74c\ucc98\ub7fc \uad6c\uc131\ub41c\ub2e4.<\/p>\n\n\n\n
App -> Header \/ Main \/ Footer\n<\/code><\/pre>\n\n\n\n
Main<\/code> \ub0b4\ubd80\uc5d0 \ub2e4\uc2dc \uc5ec\ub7ec \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc788\ub2e4\uba74:<\/p>\n\n\n\n
Main -> Sidebar \/ Content\n<\/code><\/pre>\n\n\n\n
\uc774\ub7f0 \uc2dd\uc73c\ub85c \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc870\ud569\ud574 \uc804\uccb4 UI\ub97c \uad6c\uc131\ud55c\ub2e4.<\/p>\n\n\n\n
\ucef4\ud3ec\ub10c\ud2b8\ub97c \ub098\ub204\ub294 \ubaa9\uc801\uc740 \ubb34\uc870\uac74 \ud654\uba74\uc744 \uc798\uac8c \ucabc\uac1c\ub294 \uac83\uc774 \uc544\ub2c8\ub2e4. \ucc45\uc784\uc774 \ubd84\ub9ac\ub418\uac70\ub098 \uc7ac\uc0ac\uc6a9\ub418\ub294 UI\ub97c \ub3c5\ub9bd\uc801\uc778 \ub2e8\uc704\ub85c \ub9cc\ub4dc\ub294 \uac83<\/strong>\uc774 \ud575\uc2ec\uc774\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
JSX<\/h2>\n\n\n\n
React\uc5d0\uc11c\ub294 JavaScript \ucf54\ub4dc \uc548\uc5d0 HTML\uacfc \ube44\uc2b7\ud55c \ubb38\ubc95\uc744 \uc791\uc131\ud55c\ub2e4.<\/p>\n\n\n\n
function User({ name }) {\n  return (\n    <div>\n      <h2>{name}<\/h2>\n      <p>Developer<\/p>\n    <\/div>\n  );\n}\n<\/code><\/pre>\n\n\n\n
\uc774 \ubb38\ubc95\uc774 JSX\ub2e4.<\/p>\n\n\n\n
JSX\uac00 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c \uadf8\ub300\ub85c \uc2e4\ud589\ub418\ub294 \uac83\uc740 \uc544\ub2c8\ub2e4. \ube4c\ub4dc \uacfc\uc815\uc5d0\uc11c JavaScript\uac00 \uc774\ud574\ud560 \uc218 \uc788\ub294 \ud615\ud0dc\ub85c \ubcc0\ud658\ub41c\ub2e4.<\/p>\n\n\n\n
JSX -> JavaScript -> React Element -> React Rendering -> DOM\n<\/code><\/pre>\n\n\n\n
JSX\uc758 {}<\/code> \uc548\uc5d0\ub294 JavaScript \ud45c\ud604\uc2dd\uc744 \ub123\uc744 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
<p>{user.name}<\/p>\n<\/code><\/pre>\n\n\n\n
\uc870\uac74\ubd80 \ub80c\ub354\ub9c1\ub3c4 \uac00\ub2a5\ud558\ub2e4.<\/p>\n\n\n\n
{isLogin && <Profile \/>}\n<\/code><\/pre>\n\n\n\n
\ub9ac\uc2a4\ud2b8\ub294 \uc77c\ubc18\uc801\uc73c\ub85c map()<\/code>\uc744 \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n
users.map(user => (\n  <User key={user.id} user={user} \/>\n))\n<\/code><\/pre>\n\n\n\n
JSX\ub294 \ub2e8\uc21c\ud55c HTML \ub300\uccb4 \ubb38\ubc95\uc774 \uc544\ub2c8\ub77c JavaScript\uc640 UI \ud45c\ud604\uc744 \ud558\ub098\uc758 \ucf54\ub4dc \uc548\uc5d0\uc11c \uacb0\ud569\ud558\ub294 \ubb38\ubc95<\/strong>\uc774\ub77c\uace0 \ubcf4\ub294 \ud3b8\uc774 \uc815\ud655\ud558\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
Component<\/h2>\n\n\n\n
\ucef4\ud3ec\ub10c\ud2b8\ub294 React UI\ub97c \uad6c\uc131\ud558\ub294 \uae30\ubcf8 \ub2e8\uc704\ub2e4.<\/p>\n\n\n\n
function Button() {\n  return <button>Click<\/button>;\n}\n<\/code><\/pre>\n\n\n\n
\ud568\uc218\ud615 \ucef4\ud3ec\ub10c\ud2b8\ub294 \uc785\ub825\uc744 \ubc1b\uc544 UI\ub97c \ubc18\ud658\ud558\ub294 \ud615\ud0dc\ub85c \uc0dd\uac01\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
Props \/ State -> Component -> UI\n<\/code><\/pre>\n\n\n\n
\ucef4\ud3ec\ub10c\ud2b8\uc758 \ucc45\uc784\uc774 \uc9c0\ub098\uce58\uac8c \ucee4\uc9c0\uac70\ub098 \ub3d9\uc77c\ud55c UI\uac00 \uc5ec\ub7ec \uacf3\uc5d0\uc11c \uc0ac\uc6a9\ub41c\ub2e4\uba74 \ubd84\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
\ubc18\ub300\ub85c \ub2e8\uc21c\ud788 \ucf54\ub4dc \uba87 \uc904\uc744 \ubcc4\ub3c4\uc758 \ucef4\ud3ec\ub10c\ud2b8\ub85c \ub9cc\ub4dc\ub294 \uac83\uc774 \ud56d\uc0c1 \uc88b\uc740 \uac83\uc740 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
\ucef4\ud3ec\ub10c\ud2b8 \ubd84\ub9ac\uc758 \uae30\uc900\uc740 \ubcc0\uacbd \uc774\uc720\uc640 \ucc45\uc784\uc758 \ubd84\ub9ac<\/strong>\uc5d0 \ub450\ub294 \uac83\uc774 \uc88b\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
Props<\/h2>\n\n\n\n
Props<\/code>\ub294 \ubd80\ubaa8 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub370\uc774\ud130\ub97c \uc804\ub2ec\ud558\ub294 \ubc29\ubc95\uc774\ub2e4.<\/p>\n\n\n\n
function User({ name }) {\n  return <div>{name}<\/div>;\n}\n\nfunction App() {\n  return <User name=\"John\" \/>;\n}\n<\/code><\/pre>\n\n\n\n
\ub370\uc774\ud130 \ud750\ub984\uc740 \uae30\ubcf8\uc801\uc73c\ub85c \ubd80\ubaa8\uc5d0\uc11c \uc790\uc2dd \ubc29\ud5a5\uc774\ub2e4.<\/p>\n\n\n\n
Parent -> Props -> Child\n<\/code><\/pre>\n\n\n\n
Props\ub294 \uc790\uc2dd \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc9c1\uc811 \ubcc0\uacbd\ud558\ub294 \ub370\uc774\ud130\uac00 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
\ubd80\ubaa8\uac00 \uac12\uc744 \uad00\ub9ac\ud558\uace0 \uc790\uc2dd\uc740 \uc804\ub2ec\ubc1b\uc740 \uac12\uc744 \uc774\uc6a9\ud574 UI\ub97c \uacc4\uc0b0\ud55c\ub2e4.<\/p>\n\n\n\n
\uc774\ub7ec\ud55c \ub2e8\ubc29\ud5a5 \ub370\uc774\ud130 \ud750\ub984<\/strong>\uc740 React \uad6c\uc870\ub97c \uc774\ud574\ud558\ub294 \ud575\uc2ec\uc774\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
State<\/h2>\n\n\n\n
Props\uac00 \uc678\ubd80\uc5d0\uc11c \uc804\ub2ec\ub418\ub294 \uac12\uc774\ub77c\uba74 State<\/code>\ub294 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uad00\ub9ac\ud558\ub294 \uc0c1\ud0dc\ub2e4.<\/p>\n\n\n\n
\uac00\uc7a5 \uae30\ubcf8\uc801\uc778 \ud615\ud0dc\ub294 useState()<\/code>\ub2e4.<\/p>\n\n\n\n
const [count, setCount] = useState(0);\n<\/code><\/pre>\n\n\n\n
\uc0c1\ud0dc\ub97c \uc9c1\uc811 \ubcc0\uacbd\ud558\ub294 \uac83\uc774 \uc544\ub2c8\ub77c Setter\ub97c \uc0ac\uc6a9\ud55c\ub2e4.<\/p>\n\n\n\n
setCount(count + 1);\n<\/code><\/pre>\n\n\n\n
\uc0c1\ud0dc \ubcc0\uacbd\uc740 \uc0c8\ub85c\uc6b4 \ub80c\ub354\ub9c1\uc73c\ub85c \uc774\uc5b4\uc9c4\ub2e4.<\/p>\n\n\n\n
setState() -> State Update -> Render -> UI Update\n<\/code><\/pre>\n\n\n\n
\ub530\ub77c\uc11c \ub2e4\uc74c\uacfc \uac19\uc774 \uc9c1\uc811 \ubcc0\uacbd\ud558\ub294 \uac83\uc740 \uc62c\ubc14\ub978 \ubc29\uc2dd\uc774 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
count++;\n<\/code><\/pre>\n\n\n\n
React\uac00 \uad00\ub9ac\ud558\ub294 State\ub97c \ubcc0\uacbd\ud560 \ub54c\ub294 \uc81c\uacf5\ub418\ub294 \uc0c1\ud0dc \uc5c5\ub370\uc774\ud2b8 \ubc29\uc2dd\uc744 \uc0ac\uc6a9\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
Rendering<\/h2>\n\n\n\n
React\uc758 \ud575\uc2ec\uc740 \uacb0\uad6d Rendering\uc774\ub2e4.<\/p>\n\n\n\n
\ucef4\ud3ec\ub10c\ud2b8\ub294 \ud604\uc7ac Props\uc640 State\ub97c \uae30\ubc18\uc73c\ub85c UI\ub97c \uacc4\uc0b0\ud55c\ub2e4.<\/p>\n\n\n\n
function Counter() {\n  const [count, setCount] = useState(0);\n\n  return <h1>{count}<\/h1>;\n}\n<\/code><\/pre>\n\n\n\n
count<\/code>\uac00 \ubcc0\uacbd\ub418\uba74 React\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub2e4\uc2dc \uc2e4\ud589\ud574 \uc0c8\ub85c\uc6b4 \uacb0\uacfc\ub97c \uacc4\uc0b0\ud55c\ub2e4.<\/p>\n\n\n\n
count = 0 -> <h1>0<\/h1>\ncount = 1 -> <h1>1<\/h1>\n<\/code><\/pre>\n\n\n\n
\uc5ec\uae30\uc11c \uc911\uc694\ud55c \uac83\uc740 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub2e4\uc2dc \uc2e4\ud589\ub418\ub294 \uac83\uacfc \uc2e4\uc81c DOM \uc804\uccb4\uac00 \ub2e4\uc2dc \ub9cc\ub4e4\uc5b4\uc9c0\ub294 \uac83\uc740 \ub2e4\ub974\ub2e4<\/strong>\ub294 \uc810\uc774\ub2e4.<\/p>\n\n\n\n
React\ub294 \uc0c8\ub85c\uc6b4 \uacb0\uacfc\ub97c \uacc4\uc0b0\ud558\uace0 \uae30\uc874 \uacb0\uacfc\uc640 \ube44\uad50\ud55c \ub4a4 \ud544\uc694\ud55c \ubcc0\uacbd\uc744 \uc2e4\uc81c DOM\uc5d0 \ubc18\uc601\ud55c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
Reconciliation<\/h2>\n\n\n\n
\uc774\uc804 \ub80c\ub354\ub9c1 \uacb0\uacfc\uc640 \uc0c8\ub85c\uc6b4 \ub80c\ub354\ub9c1 \uacb0\uacfc\ub97c \ube44\uad50\ud558\uace0 \uc2e4\uc81c UI \ubcc0\uacbd\uc744 \uacb0\uc815\ud558\ub294 \uacfc\uc815\uacfc \uad00\ub828\ub41c \uac1c\ub150\uc774 Reconciliation<\/code>\uc774\ub2e4.<\/p>\n\n\n\n
\uc608\ub97c \ub4e4\uc5b4 \uc774\uc804 UI\uac00:<\/p>\n\n\n\n
A \/ B \/ C\n<\/code><\/pre>\n\n\n\n
\uc600\ub2e4\uac00 \uc0c8\ub85c\uc6b4 UI\uac00:<\/p>\n\n\n\n
A \/ B \/ D\n<\/code><\/pre>\n\n\n\n
\uac00 \ub418\uc5c8\ub2e4\uba74 \uc804\uccb4 DOM\uc744 \ub2e4\uc2dc \ub9cc\ub4e4 \ud544\uc694\uac00 \uc5c6\ub2e4.<\/p>\n\n\n\n
React\ub294 \ubcc0\uacbd\ub41c \ubd80\ubd84\uc744 \ud30c\uc545\ud558\uace0 \ud544\uc694\ud55c DOM \uc5c5\ub370\uc774\ud2b8\ub97c \uc218\ud589\ud55c\ub2e4.<\/p>\n\n\n\n
\uc774 \uacfc\uc815\uc5d0\uc11c \ub9ac\uc2a4\ud2b8\uc758 key<\/code>\uac00 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
Key<\/h2>\n\n\n\n
\ub9ac\uc2a4\ud2b8\ub97c \ub80c\ub354\ub9c1\ud560 \ub54c React\ub294 \uac01 \uc694\uc18c\ub97c \uc2dd\ubcc4\ud560 \uc218 \uc788\uc5b4\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
users.map(user => (\n  <User\n    key={user.id}\n    user={user}\n  \/>\n))\n<\/code><\/pre>\n\n\n\n
key<\/code>\ub294 \ub2e8\uc21c\ud788 \uacbd\uace0\ub97c \uc81c\uac70\ud558\uae30 \uc704\ud55c \uac12\uc774 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
React\uac00 \uc774\uc804 \ub80c\ub354\ub9c1\uc758 \uc694\uc18c\uc640 \uc0c8\ub85c\uc6b4 \ub80c\ub354\ub9c1\uc758 \uc694\uc18c\ub97c \uc5f0\uacb0\ud558\uace0 \ub9ac\uc2a4\ud2b8\uc758 \ubcc0\uacbd\uc744 \ud6a8\uc728\uc801\uc73c\ub85c \ucc98\ub9ac\ud558\ub294 \ub370 \uc0ac\uc6a9\ub41c\ub2e4.<\/p>\n\n\n\n
\uac00\ub2a5\ud558\uba74 \ub370\uc774\ud130 \uc790\uccb4\uc758 \uace0\uc720 ID\ub97c \uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc88b\ub2e4.<\/p>\n\n\n\n
key={user.id}\n<\/code><\/pre>\n\n\n\n
\ubc30\uc5f4\uc758 index<\/code>\ub97c Key\ub85c \uc0ac\uc6a9\ud558\ub294 \uac83\uc740 \ub9ac\uc2a4\ud2b8\uc758 \uc0bd\uc785, \uc0ad\uc81c, \uc815\ub82c \ubcc0\uacbd \ub4f1\uc774 \ubc1c\uc0dd\ud560 \ub54c \ubb38\uc81c\uac00 \uc0dd\uae38 \uc218 \uc788\uc73c\ubbc0\ub85c \uc8fc\uc758\ud574\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
Event<\/h2>\n\n\n\n
React\uc5d0\uc11c\ub294 \uc0ac\uc6a9\uc790 \uc785\ub825\uc744 JSX \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\uc640 \uc5f0\uacb0\ud55c\ub2e4.<\/p>\n\n\n\n
<button onClick={handleClick}>\n  Click\n<\/button>\n<\/code><\/pre>\n\n\n\n
\uc77c\ubc18\uc801\uc778 \ud750\ub984\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
User Input -> Event Handler -> setState() -> Render -> UI Update\n<\/code><\/pre>\n\n\n\n
\uc608\ub97c \ub4e4\uc5b4 \uc785\ub825\ucc3d\uc758 \uac12\uc744 State\ub85c \uad00\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
function Input() {\n  const [value, setValue] = useState('');\n\n  return (\n    <input\n      value={value}\n      onChange={e => setValue(e.target.value)}\n    \/>\n  );\n}\n<\/code><\/pre>\n\n\n\n
\uc774\ucc98\ub7fc React State\uac00 Input \uac12\uc744 \uad00\ub9ac\ud558\ub294 \ubc29\uc2dd\uc744 Controlled Component<\/code>\ub77c\uace0 \ud55c\ub2e4.<\/p>\n\n\n\n
\n\n\n\n
useEffect<\/h2>\n\n\n\n
useEffect<\/code>\ub294 React\uc5d0\uc11c \uc790\uc8fc \uc624\ud574\ud558\ub294 Hook\uc774\ub2e4.<\/p>\n\n\n\n
\ub2e8\uc21c\ud788 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ud654\uba74\uc5d0 \ub098\ud0c0\ub0ac\uc744 \ub54c \uc2e4\ud589\ud558\ub294 \ucf54\ub4dc<\/strong>\ub77c\uace0 \uc774\ud574\ud558\uba74 \ubd80\uc871\ud558\ub2e4.<\/p>\n\n\n\n
useEffect<\/code>\uc758 \ud575\uc2ec \ubaa9\uc801\uc740 \ub80c\ub354\ub9c1\uc73c\ub85c \uacc4\uc0b0\ub418\ub294 UI\uc640 \uc678\ubd80 \uc2dc\uc2a4\ud15c\uc744 \ub3d9\uae30\ud654\ud558\ub294 \uac83<\/strong>\uc774\ub2e4.<\/p>\n\n\n\n
\ub300\ud45c\uc801\uc778 \uc0ac\uc6a9 \uc0ac\ub840\ub294 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
    \n
  • \ub124\ud2b8\uc6cc\ud06c \uc5f0\uacb0<\/li>\n\n\n\n
  • \ube0c\ub77c\uc6b0\uc800 \uc774\ubca4\ud2b8 \uad6c\ub3c5<\/li>\n\n\n\n
  • \ud0c0\uc774\uba38<\/li>\n\n\n\n
  • \uc678\ubd80 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc5f0\ub3d9<\/li>\n\n\n\n
  • \uc678\ubd80 \uc2dc\uc2a4\ud15c\uacfc\uc758 \ub3d9\uae30\ud654<\/li>\n<\/ul>\n\n\n\n
    \uc608\ub97c \ub4e4\uc5b4 \ud0c0\uc774\uba38\ub97c \ub4f1\ub85d\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    useEffect(() => {\n  const timer = setInterval(() => {\n    console.log('tick');\n  }, 1000);\n\n  return () => {\n    clearInterval(timer);\n  };\n}, []);\n<\/code><\/pre>\n\n\n\n
    \ubc18\ud658\ud558\ub294 \ud568\uc218\ub294 Cleanup\uc774\ub2e4.<\/p>\n\n\n\n
    Effect -> External System -> Cleanup -> Effect \uc7ac\uc2e4\ud589 \/ Component Unmount\n<\/code><\/pre>\n\n\n\n
    \ub80c\ub354\ub9c1 \uacfc\uc815\uc5d0\uc11c \uacc4\uc0b0\ud560 \uc218 \uc788\ub294 \uac12\uc744 \uad73\uc774 useEffect<\/code>\uc5d0\uc11c \uacc4\uc0b0\ud558\ub294 \uac83\uc740 \ud53c\ud558\ub294 \uac83\uc774 \uc88b\ub2e4.<\/p>\n\n\n\n
    Effect\ub294 \uc678\ubd80 \uc2dc\uc2a4\ud15c\uacfc\uc758 \ub3d9\uae30\ud654\uac00 \ud544\uc694\ud55c \uacbd\uc6b0<\/strong>\ub97c \uc6b0\uc120\uc801\uc73c\ub85c \uc0dd\uac01\ud558\uba74 \ub41c\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    useMemo\uc640 useCallback<\/h2>\n\n\n\n
    React\uc5d0\ub294 \uc131\ub2a5 \ucd5c\uc801\ud654\ub97c \uc704\ud55c useMemo<\/code>\uc640 useCallback<\/code>\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n
    useMemo<\/code>\ub294 \uacc4\uc0b0 \uacb0\uacfc\ub97c \uba54\ubaa8\uc774\uc81c\uc774\uc158\ud55c\ub2e4.<\/p>\n\n\n\n
    const result = useMemo(() => {\n  return calculate(data);\n}, [data]);\n<\/code><\/pre>\n\n\n\n
    useCallback<\/code>\uc740 \ud568\uc218\ub97c \uba54\ubaa8\uc774\uc81c\uc774\uc158\ud55c\ub2e4.<\/p>\n\n\n\n
    const handleClick = useCallback(() => {\n  doSomething(id);\n}, [id]);\n<\/code><\/pre>\n\n\n\n
    \ud558\uc9c0\ub9cc \ub458 \ub2e4 \ubb34\uc870\uac74 \uc0ac\uc6a9\ud574\uc57c \ud558\ub294 Hook\uc740 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
    \uc131\ub2a5 \ubb38\uc81c \ud655\uc778 -> \ubcd1\ubaa9 \uce21\uc815 -> Memoization \uc801\uc6a9\n<\/code><\/pre>\n\n\n\n
    \uc2e4\uc81c \ubcd1\ubaa9\uc774 \uc5c6\ub294\ub370 \ubaa8\ub4e0 \uacc4\uc0b0\uacfc \ud568\uc218\uc5d0 useMemo<\/code>, useCallback<\/code>\uc744 \uc801\uc6a9\ud558\uba74 \ucf54\ub4dc \ubcf5\uc7a1\uc131\ub9cc \uc99d\uac00\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Context<\/h2>\n\n\n\n
    \ucef4\ud3ec\ub10c\ud2b8\uac00 \uae4a\uac8c \uc911\ucca9\ub418\uba74 Props\ub97c \uc5ec\ub7ec \ub2e8\uacc4\uc5d0 \uac78\uccd0 \uc804\ub2ec\ud574\uc57c \ud558\ub294 \uc0c1\ud669\uc774 \uc0dd\uae34\ub2e4.<\/p>\n\n\n\n
    App -> A -> B -> C -> D\n<\/code><\/pre>\n\n\n\n
    D\uac00 App\uc758 \ub370\uc774\ud130\ub97c \ud544\uc694\ub85c \ud55c\ub2e4\uba74 \uc911\uac04 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc2e4\uc81c\ub85c \uc0ac\uc6a9\ud558\uc9c0 \uc54a\ub294 Props\uae4c\uc9c0 \uc804\ub2ec\ud574\uc57c \ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    App -> Props -> A -> Props -> B -> Props -> C -> Props -> D\n<\/code><\/pre>\n\n\n\n
    Context\ub294 \ud2b9\uc815 \ucef4\ud3ec\ub10c\ud2b8 \ud2b8\ub9ac \ubc94\uc704\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uacf5\uc720\ud560 \uc218 \uc788\uac8c \ud55c\ub2e4.<\/p>\n\n\n\n
    const ThemeContext = createContext(null);\n<\/code><\/pre>\n\n\n\n
    \uc0ac\uc6a9\ud558\ub294 \ucabd\uc5d0\uc11c\ub294:<\/p>\n\n\n\n
    const theme = useContext(ThemeContext);\n<\/code><\/pre>\n\n\n\n
    \ub300\ud45c\uc801\uc73c\ub85c Theme, \ud604\uc7ac \uc0ac\uc6a9\uc790, \uc5b8\uc5b4 \uc124\uc815, \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc124\uc815 \ub4f1\uc5d0 \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \ub2e4\ub9cc Context\ub97c \ubaa8\ub4e0 \uc804\uc5ed \uc0c1\ud0dc\uc5d0 \uc0ac\uc6a9\ud558\ub294 \uac83\uc740 \uc801\uc808\ud558\uc9c0 \uc54a\ub2e4. Context \uac12\uc774 \ubcc0\uacbd\ub418\uba74 \ud574\ub2f9 \uac12\uc744 \uad6c\ub3c5\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub80c\ub354\ub9c1 \uc601\ud5a5\uc774 \ubc1c\uc0dd\ud560 \uc218 \uc788\uae30 \ub54c\ubb38\uc774\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    State\uc758 \uc704\uce58<\/h2>\n\n\n\n
    React\uc5d0\uc11c\ub294 State\ub97c \uc5b4\ub514\uc5d0 \ub458 \uac83\uc778\uc9c0<\/strong>\uac00 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n
    \ub450 \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub3d9\uc77c\ud55c State\ub97c \ud544\uc694\ub85c \ud55c\ub2e4\uba74 \uacf5\ud1b5 \ubd80\ubaa8\ub85c State\ub97c \uc62c\ub9b4 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    Parent -> State -> A \/ B\n<\/code><\/pre>\n\n\n\n
    \uc774\ub97c Lifting State Up<\/code>\uc774\ub77c\uace0 \ud55c\ub2e4.<\/p>\n\n\n\n
    \uae30\ubcf8\uc801\uc778 \uae30\uc900\uc740 \ud574\ub2f9 State\ub97c \ud544\uc694\ub85c \ud558\ub294 \uac00\uc7a5 \uac00\uae4c\uc6b4 \uacf5\ud1b5 \ubd80\ubaa8<\/strong>\uc5d0 \ub450\ub294 \uac83\uc774\ub2e4.<\/p>\n\n\n\n
    State\ub97c \ubb34\uc870\uac74 \ucd5c\uc0c1\uc704 \ucef4\ud3ec\ub10c\ud2b8\uae4c\uc9c0 \uc62c\ub9ac\uba74 \uad00\ub9ac \ubc94\uc704\uac00 \ubd88\ud544\uc694\ud558\uac8c \ucee4\uc9c4\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    State\uc758 \uc885\ub958<\/h2>\n\n\n\n
    \uc2e4\uc81c React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \ubaa8\ub4e0 \uc0c1\ud0dc\ub97c \ud558\ub098\uc758 State\ub85c \uc0dd\uac01\ud558\uba74 \uc548 \ub41c\ub2e4.<\/p>\n\n\n\n
    \ub300\ud45c\uc801\uc73c\ub85c \ub2e4\uc74c\uacfc \uac19\uc774 \uad6c\ubd84\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    UI State \/ Server State \/ Form State \/ URL State\n<\/code><\/pre>\n\n\n\n
    \uc608\ub97c \ub4e4\uc5b4 Modal\uc758 \uc5f4\ub9bc \uc5ec\ubd80\ub294 UI State\ub2e4.<\/p>\n\n\n\n
    isModalOpen -> UI State\n<\/code><\/pre>\n\n\n\n
    \uc11c\ubc84\uc5d0\uc11c \uac00\uc838\uc628 \uc0ac\uc6a9\uc790 \ubaa9\ub85d\uc740 Server State\ub2e4.<\/p>\n\n\n\n
    Server -> Network -> Cache -> React UI\n<\/code><\/pre>\n\n\n\n
    Server State\uc5d0\ub294 \uce90\uc2f1, \uc7ac\uc694\uccad, Loading, Error, Stale Data \ub4f1\uc758 \ubb38\uc81c\uac00 \ud568\uaed8 \ubc1c\uc0dd\ud55c\ub2e4.<\/p>\n\n\n\n
    \ub530\ub77c\uc11c \uaddc\ubaa8\uac00 \uc788\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c\ub294 \uc11c\ubc84 \ub370\uc774\ud130\ub97c \uc804\uc6a9 Query \ub77c\uc774\ube0c\ub7ec\ub9ac\ub85c \uad00\ub9ac\ud558\ub294 \uacbd\uc6b0\uac00 \ub9ce\ub2e4.<\/p>\n\n\n\n
    \ud575\uc2ec\uc740 \uc0c1\ud0dc\uc758 \uc131\uaca9\uc5d0 \ub530\ub77c \uad00\ub9ac \ubc29\ubc95\uc744 \ub2e4\ub974\uac8c \uac00\uc838\uac00\ub294 \uac83<\/strong>\uc774\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Custom Hook<\/h2>\n\n\n\n
    React\uc5d0\uc11c\ub294 \ubc18\ubcf5\ub418\ub294 \uc0c1\ud0dc \ub85c\uc9c1\uc744 Custom Hook\uc73c\ub85c \ubd84\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    function useCounter() {\n  const [count, setCount] = useState(0);\n\n  const increment = () => {\n    setCount(value => value + 1);\n  };\n\n  return {\n    count,\n    increment,\n  };\n}\n<\/code><\/pre>\n\n\n\n
    \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c\ub294 \ub2e4\uc74c\ucc98\ub7fc \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    function Counter() {\n  const { count, increment } = useCounter();\n\n  return (\n    <button onClick={increment}>\n      {count}\n    <\/button>\n  );\n}\n<\/code><\/pre>\n\n\n\n
    Custom Hook\uc758 \ubaa9\uc801\uc740 UI \uc790\uccb4\ub97c \uc7ac\uc0ac\uc6a9\ud558\ub294 \uac83\uc774 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
    React\uc758 \uc0c1\ud0dc \uad00\ub9ac\uc640 \uad00\ub828\ub41c \ub85c\uc9c1\uc744 \uc7ac\uc0ac\uc6a9\ud558\ub294 \uac83<\/strong>\uc774\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Routing<\/h2>\n\n\n\n
    SPA\uc5d0\uc11c\ub294 URL\uc5d0 \ub530\ub77c \ub2e4\ub978 \ud654\uba74\uc744 \ubcf4\uc5ec\uc918\uc57c \ud55c\ub2e4.<\/p>\n\n\n\n
    React\uc5d0\uc11c\ub294 React Router\uc640 \uac19\uc740 \ub77c\uc6b0\ud305 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    URL -> Router -> Route -> Component\n<\/code><\/pre>\n\n\n\n
    \uc608\ub97c \ub4e4\uc5b4:<\/p>\n\n\n\n
    \/ -> Home\n\/users -> UserList\n\/users\/123 -> UserDetail\n\/settings -> Settings\n<\/code><\/pre>\n\n\n\n
    \ub77c\uc6b0\ud305\uc740 \ub2e8\uc21c\ud55c \ud654\uba74 \uc804\ud658\ubfd0\ub9cc \uc544\ub2c8\ub77c URL Parameter, Query String, Nested Route, Navigation \ub4f1\uc744 \uad00\ub9ac\ud558\ub294 \uc5ed\ud560\ub3c4 \ud55c\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    Form<\/h2>\n\n\n\n
    React Form\uc740 \ud06c\uac8c Controlled \ubc29\uc2dd\uacfc Uncontrolled \ubc29\uc2dd\uc73c\ub85c \ub098\ub220\uc11c \uc0dd\uac01\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    Controlled \ubc29\uc2dd\uc5d0\uc11c\ub294 React State\uac00 \uc785\ub825\uac12\uc744 \uad00\ub9ac\ud55c\ub2e4.<\/p>\n\n\n\n
    const [name, setName] = useState('');\n\n<input\n  value={name}\n  onChange={e => setName(e.target.value)}\n\/>\n<\/code><\/pre>\n\n\n\n
    Form\uc774 \ubcf5\uc7a1\ud574\uc9c0\uba74 \ubaa8\ub4e0 Input\uc744 \uc9c1\uc811 State\ub85c \uad00\ub9ac\ud558\ub294 \ub300\uc2e0 \uc804\uc6a9 Form \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud560 \uc218\ub3c4 \uc788\ub2e4.<\/p>\n\n\n\n
    \uc5ec\uae30\uc11c \uc911\uc694\ud55c \uac83\uc740 \ub77c\uc774\ube0c\ub7ec\ub9ac\ubcf4\ub2e4 Form State\ub97c \uc5b4\ub514\uc5d0\uc11c \uc5b4\ub5bb\uac8c \uad00\ub9ac\ud560 \uac83\uc778\uac00<\/strong>\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    React\uc640 TypeScript<\/h2>\n\n\n\n
    \uc2e4\uc81c React \ud504\ub85c\uc81d\ud2b8\uc5d0\uc11c\ub294 TypeScript\ub97c \ud568\uaed8 \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0\uac00 \ub9ce\ub2e4.<\/p>\n\n\n\n
    Props\uc758 \ub370\uc774\ud130 \uad6c\uc870\ub97c \uba85\ud655\ud558\uac8c \uc815\uc758\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    interface UserProps {\n  id: number;\n  name: string;\n}\n\nfunction User({ id, name }: UserProps) {\n  return <div>{name}<\/div>;\n}\n<\/code><\/pre>\n\n\n\n
    State\uc5d0\ub3c4 \ud0c0\uc785\uc744 \uc9c0\uc815\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    const [user, setUser] = useState<User | null>(null);\n<\/code><\/pre>\n\n\n\n
    React\uac00 TypeScript\ub97c \ud544\uc218\ub85c \uc694\uad6c\ud558\ub294 \uac83\uc740 \uc544\ub2c8\uc9c0\ub9cc \ud504\ub85c\uc81d\ud2b8 \uaddc\ubaa8\uac00 \ucee4\uc9c8\uc218\ub85d \ucef4\ud3ec\ub10c\ud2b8 \uac04 \ub370\uc774\ud130 \uacc4\uc57d\uc744 \uba85\ud655\ud558\uac8c \ub9cc\ub4e4 \uc218 \uc788\ub2e4\ub294 \uc7a5\uc810\uc774 \ud06c\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    \ucef4\ud3ec\ub10c\ud2b8 \uc124\uacc4<\/h2>\n\n\n\n
    \ucef4\ud3ec\ub10c\ud2b8 \ud558\ub098\uac00 \uc9c0\ub098\uce58\uac8c \ub9ce\uc740 \ucc45\uc784\uc744 \uac00\uc9c0\uace0 \uc788\uc73c\uba74 \uc720\uc9c0\ubcf4\uc218\uac00 \uc5b4\ub824\uc6cc\uc9c4\ub2e4.<\/p>\n\n\n\n
    \uc608\ub97c \ub4e4\uc5b4:<\/p>\n\n\n\n
    UserPage -> API Request \/ Data Transform \/ Form \/ Modal \/ Table \/ Pagination \/ State\n<\/code><\/pre>\n\n\n\n
    \uc774\ub7f0 \uad6c\uc870\ub294 \uc2dc\uac04\uc774 \uc9c0\ub0a0\uc218\ub85d \ubcf5\uc7a1\ud574\uc9c8 \uac00\ub2a5\uc131\uc774 \ub192\ub2e4.<\/p>\n\n\n\n
    \ucc45\uc784\uc5d0 \ub530\ub77c \ubd84\ub9ac\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc774 \uad6c\uc131\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    UserPage -> UserList \/ UserForm \/ UserModal \/ Pagination\n<\/code><\/pre>\n\n\n\n
    \ub370\uc774\ud130 \ucc98\ub9ac\ub098 \ubcf5\uc7a1\ud55c \uc0c1\ud0dc \ub85c\uc9c1\uc740 Custom Hook\uc774\ub098 \ubcc4\ub3c4\uc758 \ub370\uc774\ud130 \uacc4\uce35\uc73c\ub85c \ubd84\ub9ac\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    Component -> Custom Hook -> Service \/ Query -> API\n<\/code><\/pre>\n\n\n\n
    \ud558\uc9c0\ub9cc \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc791\uac8c \ub9cc\ub4dc\ub294 \uac83 \uc790\uccb4\uac00 \ubaa9\ud45c\ub294 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
    \ubcc0\uacbd \uc774\uc720\uac00 \ub2e4\ub978 \ucf54\ub4dc\uc640 \uc7ac\uc0ac\uc6a9\ub418\ub294 \ucf54\ub4dc\ub97c \uc801\uc808\ud558\uac8c \ubd84\ub9ac\ud558\ub294 \uac83<\/strong>\uc774 \ud575\uc2ec\uc774\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    React\uc758 \uc131\ub2a5<\/h2>\n\n\n\n
    React\uc5d0\uc11c \uc131\ub2a5 \ubb38\uc81c\ub97c \ub2e8\uc21c\ud788 \ub80c\ub354\ub9c1 \ud69f\uc218\ub85c \ud310\ub2e8\ud558\uba74 \uc548 \ub41c\ub2e4.<\/p>\n\n\n\n
    \ub80c\ub354\ub9c1\uc740 React\uc758 \uc815\uc0c1\uc801\uc778 \ub3d9\uc791\uc774\ub2e4.<\/p>\n\n\n\n
    \uc2e4\uc81c\ub85c \ud655\uc778\ud574\uc57c \ud558\ub294 \uac83\uc740 \uc5b4\ub5a4 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc790\uc8fc \ub80c\ub354\ub9c1\ub418\ub294\uc9c0, \ub80c\ub354\ub9c1 \uacfc\uc815\uc5d0\uc11c \ubb34\uac70\uc6b4 \uacc4\uc0b0\uc774 \ubc1c\uc0dd\ud558\ub294\uc9c0, \uc2e4\uc81c DOM \ubcc0\uacbd\uc774 \ub9ce\uc740\uc9c0, \ub124\ud2b8\uc6cc\ud06c\ub098 \uc774\ubbf8\uc9c0 \ucc98\ub9ac \ub4f1\uc774 \ubcd1\ubaa9\uc778\uc9c0\ub2e4.<\/p>\n\n\n\n
    \ub300\ud45c\uc801\uc778 \uc6d0\uc778\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
    \ubd88\ud544\uc694\ud55c State Update \/ \ub113\uc740 State \ubc94\uc704 \/ \ud070 List \/ \ubb34\uac70\uc6b4 \uacc4\uc0b0 \/ \uacfc\ub3c4\ud55c Context Update \/ \ubd88\ud544\uc694\ud55c Effect\n<\/code><\/pre>\n\n\n\n
    React DevTools Profiler \ub4f1\uc744 \uc0ac\uc6a9\ud574 \uc2e4\uc81c \ubcd1\ubaa9\uc744 \uce21\uc815\ud55c \ub4a4 \ucd5c\uc801\ud654\ud558\ub294 \uac83\uc774 \uc88b\ub2e4.<\/p>\n\n\n\n
    \uc131\ub2a5 \ubb38\uc81c -> \uce21\uc815 -> \ubcd1\ubaa9 \ud655\uc778 -> \ucd5c\uc801\ud654 -> \uc7ac\uce21\uc815\n<\/code><\/pre>\n\n\n\n
    \ucd94\uce21\uc73c\ub85c memo<\/code>, useMemo<\/code>, useCallback<\/code>\uc744 \ub0a8\ubc1c\ud558\ub294 \uac83\ubcf4\ub2e4 \uce21\uc815 \uae30\ubc18\uc73c\ub85c \uc811\uadfc\ud558\ub294 \uac83\uc774 \ud6a8\uc728\uc801\uc774\ub2e4.<\/p>\n\n\n\n
    \n\n\n\n
    React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \uc804\uccb4 \uad6c\uc870<\/h2>\n\n\n\n
    \uaddc\ubaa8\uac00 \uc788\ub294 React \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub2e8\uc21c\ud654\ud558\uba74 \ub2e4\uc74c\uacfc \uac19\uc740 \uad6c\uc870\ub85c \ubcfc \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    React App -> Router \/ UI -> Component -> Hook \/ Query -> State \/ Server State -> API\n<\/code><\/pre>\n\n\n\n
    \uc870\uae08 \ub354 \uc138\ubd84\ud654\ud558\uba74:<\/p>\n\n\n\n
    React App -> Page -> Component -> Custom Hook -> Query \/ Service -> API\n<\/code><\/pre>\n\n\n\n
    \uc0c1\ud0dc\ub294 \uc131\uaca9\uc5d0 \ub530\ub77c \ubd84\ub9ac\ud55c\ub2e4.<\/p>\n\n\n\n
    State -> UI State \/ Server State \/ Form State \/ URL State\n<\/code><\/pre>\n\n\n\n
    \uadf8\ub9ac\uace0 \ucef4\ud3ec\ub10c\ud2b8 \uc0ac\uc774\uc758 \uae30\ubcf8 \ub370\uc774\ud130 \ud750\ub984\uc740 \ub2e4\uc74c\uacfc \uac19\ub2e4.<\/p>\n\n\n\n
    Parent -> Props -> Child\n<\/code><\/pre>\n\n\n\n
    \uc0ac\uc6a9\uc790 \uc785\ub825\uc740 \uc0c1\ud0dc \ubcc0\uacbd\uc73c\ub85c \uc5f0\uacb0\ub41c\ub2e4.<\/p>\n\n\n\n
    User Input -> Event Handler -> State Update -> Render -> UI\n<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    React\uc758 \ud575\uc2ec \ud750\ub984<\/h2>\n\n\n\n
    React\ub97c \ud558\ub098\uc758 \ud750\ub984\uc73c\ub85c \uc555\ucd95\ud558\uba74 \uacb0\uad6d \ub2e4\uc74c \uad6c\uc870\ub2e4.<\/p>\n\n\n\n
    State -> Render -> UI -> User Event -> State Update -> Render\n<\/code><\/pre>\n\n\n\n
    \ucef4\ud3ec\ub10c\ud2b8 \uac04 \ub370\uc774\ud130\ub294 \uae30\ubcf8\uc801\uc73c\ub85c \ub2e8\ubc29\ud5a5\uc73c\ub85c \ud750\ub978\ub2e4.<\/p>\n\n\n\n
    Parent -> Props -> Child\n<\/code><\/pre>\n\n\n\n
    \uc11c\ubc84 \ub370\uc774\ud130\ub97c \uc0ac\uc6a9\ud558\ub294 \uacbd\uc6b0\uc5d0\ub294 \ub370\uc774\ud130 \uacc4\uce35\uc774 \ucd94\uac00\ub41c\ub2e4.<\/p>\n\n\n\n
    Component -> Hook \/ Query -> API -> Server\n<\/code><\/pre>\n\n\n\n
    \uc678\ubd80 \uc2dc\uc2a4\ud15c\uacfc \ub3d9\uae30\ud654\uac00 \ud544\uc694\ud558\uba74 Effect\uac00 \uac1c\uc785\ud55c\ub2e4.<\/p>\n\n\n\n
    Render -> Effect -> External System -> Cleanup\n<\/code><\/pre>\n\n\n\n
    \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uaddc\ubaa8\uac00 \ucee4\uc9c0\uba74 \uc0c1\ud0dc\uc758 \uc885\ub958\uc640 \ucc45\uc784\uc744 \ubd84\ub9ac\ud55c\ub2e4.<\/p>\n\n\n\n
    UI State \/ Server State \/ Form State \/ URL State\n<\/code><\/pre>\n\n\n\n
    \n\n\n\n
    \uc815\ub9ac<\/h2>\n\n\n\n
    React\ub97c \uc774\ud574\ud560 \ub54c JSX \ubb38\ubc95\uc774\ub098 Hook \ubaa9\ub85d\ubd80\ud130 \uc678\uc6b0\ub294 \uac83\ubcf4\ub2e4 State\uc640 UI\uc758 \uad00\uacc4<\/strong>\ub97c \uba3c\uc800 \uc7a1\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4.<\/p>\n\n\n\n
    \uac00\uc7a5 \ud575\uc2ec\uc801\uc778 \uad6c\uc870\ub294 \ub2e4\uc74c\uc774\ub2e4.<\/p>\n\n\n\n
    State -> Render -> UI -> Event -> State Update -> Render\n<\/code><\/pre>\n\n\n\n
    Component<\/code>\ub294 UI\ub97c \uad6c\uc131\ud558\uace0, Props<\/code>\ub294 \ubd80\ubaa8\uc5d0\uc11c \uc790\uc2dd\uc73c\ub85c \ub370\uc774\ud130\ub97c \uc804\ub2ec\ud55c\ub2e4.<\/p>\n\n\n\n
    State<\/code>\ub294 UI\ub97c \uacb0\uc815\ud558\ub294 \ubcc0\uacbd \uac00\ub2a5\ud55c \ub370\uc774\ud130\ub97c \uad00\ub9ac\ud558\uace0, \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\uba74 React\uac00 \ub2e4\uc2dc \ub80c\ub354\ub9c1\ud55c\ub2e4.<\/p>\n\n\n\n
    useEffect<\/code>\ub294 \uc678\ubd80 \uc2dc\uc2a4\ud15c\uacfc React\ub97c \ub3d9\uae30\ud654\ud560 \ub54c \uc0ac\uc6a9\ud558\uba70, Context<\/code>\ub294 \ud2b9\uc815 \ucef4\ud3ec\ub10c\ud2b8 \ud2b8\ub9ac \ubc94\uc704\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uacf5\uc720\ud55c\ub2e4.<\/p>\n\n\n\n
    Custom Hook<\/code>\uc740 \uc0c1\ud0dc \ub85c\uc9c1\uc744 \uc7ac\uc0ac\uc6a9\ud558\uae30 \uc704\ud55c \ub3c4\uad6c\uc774\uace0, Query<\/code>\ub098 \ubcc4\ub3c4\uc758 \ub370\uc774\ud130 \uacc4\uce35\uc740 \uc11c\ubc84 \uc0c1\ud0dc\ub97c \uad00\ub9ac\ud558\ub294 \ub370 \ud65c\uc6a9\ud560 \uc218 \uc788\ub2e4.<\/p>\n\n\n\n
    \uacb0\uad6d React\uc5d0\uc11c \uc911\uc694\ud55c \uc9c8\ubb38\uc740 \ubb38\ubc95\uc774 \uc544\ub2c8\ub2e4.<\/p>\n\n\n\n
    \uc5b4\ub5a4 \uc0c1\ud0dc\ub97c \uc5b4\ub514\uc5d0\uc11c \uad00\ub9ac\ud558\ub294\uac00.<\/strong><\/p>\n\n\n\n
    \uadf8 \uc0c1\ud0dc\ub97c \uc5b4\ub5a4 \ucef4\ud3ec\ub10c\ud2b8\uac00 \uc0ac\uc6a9\ud558\ub294\uac00.<\/strong><\/p>\n\n\n\n
    \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub410\uc744 \ub54c \uc5b4\ub5a4 UI\uac00 \ub2e4\uc2dc \uacc4\uc0b0\ub418\ub294\uac00.<\/strong><\/p>\n\n\n\n
    \uc774 \uc138 \uac00\uc9c0\ub97c \uc774\ud574\ud558\uba74 Props<\/code>, State<\/code>, Rendering<\/code>, Effect<\/code>, Context<\/code>, Hook<\/code>, Router<\/code> \uac19\uc740 \uae30\ub2a5\ub4e4\uc774 \uc11c\ub85c \ub3c5\ub9bd\uc801\uc778 \uac1c\ub150\uc774 \uc544\ub2c8\ub77c \ud558\ub098\uc758 \uc0c1\ud0dc \uae30\ubc18 UI \uc2dc\uc2a4\ud15c<\/strong> \uc548\uc5d0\uc11c \uc5f0\uacb0\ub418\uc5b4 \uc788\ub2e4\ub294 \uac83\uc744 \uc774\ud574\ud560 \uc218 \uc788\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
    React \uac1c\ubc1c \ud575\uc2ec \uc815\ub9ac React\ub97c \ucc98\uc74c \ubc30\uc6b0\uba74 \ucef4\ud3ec\ub10c\ud2b8\uc640 JSX\ubd80\ud130 \uc811\ud558\uac8c \ub41c\ub2e4. \ud558\uc9c0\ub9cc React\ub97c \uc81c\ub300\ub85c \uc774\ud574\ud558\ub824\uba74 \ubb38\ubc95\ubcf4\ub2e4 \uc0c1\ud0dc\uac00 \uc5b4\ub5bb\uac8c UI\ub85c \uc5f0\uacb0\ub418\uace0 \ub2e4\uc2dc \uc0c1\ud0dc \ubcc0\uacbd\uc73c\ub85c \ub3cc\uc544\uc624\ub294\uc9c0\ub97c \uba3c\uc800 \uc774\ud574\ud558\ub294 \uac83\uc774 \uc911\uc694\ud558\ub2e4. React\uc758 \ud575\uc2ec\uc740 \uc0c1\ud0dc\ub97c \uae30\ubc18\uc73c\ub85c UI\ub97c \uc120\uc5b8\ud558\ub294 \uac83\uc774\ub2e4. \uac1c\ubc1c\uc790\uac00 DOM\uc744 \uc9c1\uc811 \ucc3e\uc544 \uc218\uc815\ud558\ub294 \ub300\uc2e0 \ud604\uc7ac \uc0c1\ud0dc\uc5d0\uc11c \uc5b4\ub5a4 UI\uac00 \ub9cc\ub4e4\uc5b4\uc838\uc57c \ud558\ub294\uc9c0\ub97c \uc791\uc131\ud55c\ub2e4. React\ub294 \uc0c1\ud0dc\uac00 \ubcc0\uacbd\ub418\uba74 \uc0c8\ub85c\uc6b4 UI\ub97c \uacc4\uc0b0\ud558\uace0 \ud544\uc694\ud55c […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[48],"tags":[],"class_list":["post-1645","post","type-post","status-publish","format-standard","hentry","category-client"],"_links":{"self":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/1645","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1645"}],"version-history":[{"count":3,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/1645\/revisions"}],"predecessor-version":[{"id":1934,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=\/wp\/v2\/posts\/1645\/revisions\/1934"}],"wp:attachment":[{"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1645"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1645"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wayhope.kro.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1645"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}