{"id":89,"date":"2026-06-26T13:32:24","date_gmt":"2026-06-26T13:32:24","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=89"},"modified":"2026-06-26T13:32:24","modified_gmt":"2026-06-26T13:32:24","slug":"nav","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=89","title":{"rendered":"Nav"},"content":{"rendered":"

03. Nav.jsx \u2014 \ub124\ube44\uac8c\uc774\uc158 \ubc14<\/h1>\n

\uc774\ubc88 \ub2e8\uacc4\uc5d0\uc11c \ud560 \uc77c<\/h2>\n

\uc0c1\ub2e8 \ub124\ube44\uac8c\uc774\uc158 \ubc14\ub97c \ub9cc\ub4ed\ub2c8\ub2e4.
\n\ud074\ub9ad\ud55c \uba54\ub274\uac00 \ud68c\uc0c9 pill \ubc30\uacbd\uc73c\ub85c \ubc14\ub00c\ub294 \uae30\ub2a5\ub3c4 \uad6c\ud604\ud569\ub2c8\ub2e4.<\/p>\n

\n

\ud53c\uadf8\ub9c8 \ub514\uc790\uc778 \ubd84\uc11d<\/h2>\n
\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\n\u2502  [\ub85c\uace0]      \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2510                            \u2502\n\u2502             \u2502 Home \u2502  AboutMe   Projects         \u2502  \ub192\uc774: 99px\n\u2502              \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2518                            \u2502\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518\n<\/code><\/pre>\n\n\n\n\n\n\n\n\n\n
\uc694\uc18c<\/th>\n\uac12<\/th>\n<\/tr>\n<\/thead>\n
\uc804\uccb4 \ub192\uc774<\/td>\n99px<\/td>\n<\/tr>\n
\ubc30\uacbd\uc0c9<\/td>\n#ffffff<\/td>\n<\/tr>\n
\ud65c\uc131 \uba54\ub274 \ubc30\uacbd<\/td>\n#f5f5f5, \ub465\uadfc pill \ubaa8\uc591<\/td>\n<\/tr>\n
\ud14d\uc2a4\ud2b8 \uc0c9<\/td>\n#1e1e1e<\/td>\n<\/tr>\n
\ud3f0\ud2b8 \ud06c\uae30<\/td>\n16px<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n
\uc0c8\ub85c\uc6b4 \uac1c\ub150: NavLink<\/code><\/h2>\n
React Router\uc758 NavLink<\/code>\ub294 <a><\/code> \ud0dc\uadf8\ucc98\ub7fc \ub9c1\ud06c\ub97c \ub9cc\ub4e4\uc9c0\ub9cc,
\n\ud604\uc7ac URL\uacfc \uc77c\uce58\ud558\uba74 \uc790\ub3d9\uc73c\ub85c active \uc0c1\ud0dc\ub97c \uc54c\ub824\uc90d\ub2c8\ub2e4.<\/strong><\/p>\n
import { NavLink } from 'react-router'\n\n<NavLink\n  to="#home"\n  className={({ isActive }) =>\n    `nav-item ${isActive ? 'nav-item--active' : ''}`\n  }\n>\n  Home\n<\/NavLink>\n<\/code><\/pre>\n
    \n
  • to<\/code> \u2192 \uc774\ub3d9\ud560 \uacbd\ub85c (href<\/code> \ub300\uc2e0 to<\/code> \ub97c \uc501\ub2c8\ub2e4)<\/li>\n
  • className<\/code> \u2192 \ud568\uc218\ub97c \uc804\ub2ec\ud558\uba74 { isActive }<\/code> \ub97c \ubc1b\uc544 \ub3d9\uc801 \ud074\ub798\uc2a4 \uc124\uc815 \uac00\ub2a5<\/li>\n
  • isActive<\/code> \u2192 \ud604\uc7ac URL\uc774 to<\/code> \uc640 \uc77c\uce58\ud558\uba74 true<\/code>, \uc544\ub2c8\uba74 false<\/code><\/li>\n<\/ul>\n
    \n
    STEP 1 \u2014 Nav.jsx \uc791\uc131<\/h2>\n
    \/\/ src\/components\/Nav.jsx\nimport { NavLink } from 'react-router'\n\nconst Nav = () => {\n  \/\/ \uba54\ub274 \ud56d\ubaa9: \ud654\uba74\uc5d0 \ubcf4\uc77c \uc774\ub984\uacfc \uc774\ub3d9\ud560 \ud574\uc2dc\ub97c \ud568\uaed8 \uad00\ub9ac\n  const links = [\n    { label: 'Home',     hash: '#home' },\n    { label: 'AboutMe',  hash: '#aboutme' },\n    { label: 'Projects', hash: '#projects' },\n  ]\n\n  return (\n    <nav className="nav">\n\n      {\/* \ub85c\uace0 \uc601\uc5ed *\/}\n      <div className="nav-logo">\n        <svg width="30" height="37" viewBox="0 0 30 37" fill="none">\n          <path d="M0 0 L10 37 L20 0 Z" fill="#000" \/>\n          <path d="M10 0 L30 37 L20 0 Z" fill="#000" \/>\n        <\/svg>\n      <\/div>\n\n      {\/* \uba54\ub274 \ubaa9\ub85d *\/}\n      <ul className="nav-list">\n        {links.map(({ label, hash }) => (\n          <li key={label}>\n            <NavLink\n              to={hash}\n              className={({ isActive }) =>\n                `nav-item ${isActive ? 'nav-item--active' : ''}`\n              }\n            >\n              {label}\n            <\/NavLink>\n          <\/li>\n        ))}\n      <\/ul>\n\n    <\/nav>\n  )\n}\n\nexport default Nav\n<\/code><\/pre>\n
    \n
    \ucf54\ub4dc \uc124\uba85<\/h2>\n
    \uac1d\uccb4 \ubc30\uc5f4 + \uad6c\uc870 \ubd84\ud574 { label, hash }<\/code><\/h3>\n
    const links = [\n  { label: 'Home',     hash: '#home' },\n  { label: 'AboutMe',  hash: '#aboutme' },\n  { label: 'Projects', hash: '#projects' },\n]\n\n{links.map(({ label, hash }) => (\n  <li key={label}>...<\/li>\n))}\n<\/code><\/pre>\n
    \ubc30\uc5f4 \uc694\uc18c\uac00 \uac1d\uccb4<\/strong>\uc774\ubbc0\ub85c { label, hash }<\/code> \ub85c \uad6c\uc870 \ubd84\ud574\ud558\uc5ec
    \nlabel<\/code>(\ud654\uba74\uc5d0 \ubcf4\uc77c \ud14d\uc2a4\ud2b8)\uacfc hash<\/code>(\uc774\ub3d9\ud560 \uc704\uce58)\ub97c \uaebc\ub0c5\ub2c8\ub2e4.<\/p>\n
    \n
    key={label}<\/code> \uc740 \uc65c \ud544\uc694\ud55c\uac00\uc694?<\/strong>
    \nReact\uac00 \ubaa9\ub85d\uc5d0\uc11c \uac01 \ud56d\ubaa9\uc744 \uad6c\ubcc4\ud558\uae30 \uc704\ud574 \ud544\uc694\ud569\ub2c8\ub2e4.
    \n\uc5c6\uc73c\uba74 \uacbd\uace0\uac00 \ub098\uc635\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n
    NavLink<\/code> \u2014 \ud65c\uc131 \uba54\ub274 \uc790\ub3d9 \uac10\uc9c0<\/h3>\n
    <NavLink\n  to={hash}\n  className={({ isActive }) =>\n    `nav-item ${isActive ? 'nav-item--active' : ''}`\n  }\n>\n  {label}\n<\/NavLink>\n<\/code><\/pre>\n