Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
phnml1 committed Oct 26, 2024
1 parent e2ec282 commit 851d3e4
Show file tree
Hide file tree
Showing 76 changed files with 42 additions and 42 deletions.
2 changes: 1 addition & 1 deletion 404.html
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>404: This page could not be found</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/cea7fc6ccc7bac98.css" as="style" crossorigin=""/><link rel="stylesheet" href="/_next/static/css/cea7fc6ccc7bac98.css" crossorigin="" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" crossorigin="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-6f336cc197ef678d.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/framework-66d32731bdd20e83.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/main-aa55ffd08992d156.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/pages/_app-e287481ee6e74633.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/pages/_error-ee5b5fb91d29d86f.js" defer="" crossorigin=""></script><script src="/_next/static/owMDksqZMVYMHGpa0q1xs/_buildManifest.js" defer="" crossorigin=""></script><script src="/_next/static/owMDksqZMVYMHGpa0q1xs/_ssgManifest.js" defer="" crossorigin=""></script></head><body><div id="__next"><script>!function(){try{var d=document.documentElement,c=d.classList;c.remove('light','dark');var e=localStorage.getItem('theme');if('system'===e||(!e&&true)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){d.style.colorScheme = 'dark';c.add('dark')}else{d.style.colorScheme = 'light';c.add('light')}}else if(e){c.add(e|| '')}if(e==='light'||e==='dark')d.style.colorScheme=e}catch(e){}}()</script><div style="font-family:system-ui,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div style="line-height:48px"><style>body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}</style><h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding-right:23px;font-size:24px;font-weight:500;vertical-align:top">404</h1><div style="display:inline-block"><h2 style="font-size:14px;font-weight:400;line-height:28px">This page could not be found<!-- -->.</h2></div></div></div></div><script id="__NEXT_DATA__" type="application/json" crossorigin="">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"owMDksqZMVYMHGpa0q1xs","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>404: This page could not be found</title><meta name="next-head-count" content="3"/><link rel="preload" href="/_next/static/css/cea7fc6ccc7bac98.css" as="style" crossorigin=""/><link rel="stylesheet" href="/_next/static/css/cea7fc6ccc7bac98.css" crossorigin="" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" crossorigin="" nomodule="" src="/_next/static/chunks/polyfills-c67a75d1b6f99dc8.js"></script><script src="/_next/static/chunks/webpack-6f336cc197ef678d.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/framework-66d32731bdd20e83.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/main-aa55ffd08992d156.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/pages/_app-e287481ee6e74633.js" defer="" crossorigin=""></script><script src="/_next/static/chunks/pages/_error-ee5b5fb91d29d86f.js" defer="" crossorigin=""></script><script src="/_next/static/ouFxnvAPXOOQRIKArTLFG/_buildManifest.js" defer="" crossorigin=""></script><script src="/_next/static/ouFxnvAPXOOQRIKArTLFG/_ssgManifest.js" defer="" crossorigin=""></script></head><body><div id="__next"><script>!function(){try{var d=document.documentElement,c=d.classList;c.remove('light','dark');var e=localStorage.getItem('theme');if('system'===e||(!e&&true)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){d.style.colorScheme = 'dark';c.add('dark')}else{d.style.colorScheme = 'light';c.add('light')}}else if(e){c.add(e|| '')}if(e==='light'||e==='dark')d.style.colorScheme=e}catch(e){}}()</script><div style="font-family:system-ui,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div style="line-height:48px"><style>body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}</style><h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding-right:23px;font-size:24px;font-weight:500;vertical-align:top">404</h1><div style="display:inline-block"><h2 style="font-size:14px;font-weight:400;line-height:28px">This page could not be found<!-- -->.</h2></div></div></div></div><script id="__NEXT_DATA__" type="application/json" crossorigin="">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"ouFxnvAPXOOQRIKArTLFG","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>
1 change: 1 addition & 0 deletions _next/data/ouFxnvAPXOOQRIKArTLFG/posts/tag/Algorithm.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions _next/data/ouFxnvAPXOOQRIKArTLFG/posts/tag/hook.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"pageProps":{"tags":["react","JavaScript","deepdive","useState","hook","ํด๋กœ์ €","์ƒ๋ช…์ฃผ๊ธฐ","Virtual DOM","Algorithm","๋ฐฑ์ค€","gold","dfs","ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค","lv3","bfs","์ด๋ถ„ํƒ์ƒ‰"],"currentTag":"hook","posts":[{"slug":"posts/React/React useState ํ›…๊ณผ ํด๋กœ์ €","title":"React useState ํ›…๊ณผ ํด๋กœ์ €","date":"2024-10-26T18:00:24.000Z","image":"index.png","summary":"ํด๋กœ์ €๋ฅผ ์ด์šฉํ•œ React useState ํ›…์˜ ์ž‘๋™ ์›๋ฆฌ๋ฅผ ์ดํ•ดํ•ด๋ณด์ž","tags":["react","JavaScript","deepdive","useState","hook","ํด๋กœ์ €"],"content":"# React useState ํ›…๊ณผ ํด๋กœ์ €\r\n\r\nํด๋กœ์ €์— ๋Œ€ํ•ด ๊ฐœ๋…์€ ์•Œ๊ณ  ์žˆ์—ˆ์ง€๋งŒ, ์‚ฌ์‹ค ๋ฉด์ ‘ ์งˆ๋ฌธ๋•Œ๋‚˜ ์“ฐ์ด๋Š” ๊ฒƒ์ด๊ณ , ์‹ค์ œ๋กœ ์–ด๋–ป๊ฒŒ ์“ฐ์ด๋Š”์ง€์— ๋Œ€ํ•ด์„œ๋Š” ์™€๋‹ฟ์ง€ ๋ชปํ•œ ๋ถ€๋ถ„๋„ ์žˆ์—ˆ๋‹ค. ๊ทธ๋Ÿฌ๋˜ ๋„์ค‘ react deep dive๋ฅผ ๊ณต๋ถ€ํ•˜๋ฉฐ, react ๊ฐœ๋ฐœ์ž๊ฐ€ ์•„๋งˆ๋„ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” **useState**์— ํด๋กœ์ €๊ฐ€ ์“ฐ์ธ๋‹ค๋Š” ์‚ฌ์‹ค์„ ์•Œ์•˜๋‹ค! \r\n์–ด๋–ป๊ฒŒ ์“ฐ์ด๋Š” ์ง€ ํ•จ๊ป˜ ์‚ดํŽด๋ณด์ž.\r\n\r\n\r\n\r\n## ์ƒํƒœ๊ฐ’์„ ์–ด๋–ป๊ฒŒ ๊ด€๋ฆฌํ• ๊นŒ\r\n๋ณดํ†ต useState์˜ ๊ธฐ๋ณธ ์‚ฌ์šฉ๋ฒ•์€ ๋‹ค์Œ๊ณผ ๊ฐ™์„ ๊ฒƒ์ด๋‹ค\r\n```js\r\nimport { useState } from 'react'\r\n\r\nconst [state, setState] = useState\r\n```\r\n์ธ์ˆ˜๋กœ state์˜ ์ดˆ๊นƒ๊ฐ’์„ ๋„˜๊ฒจ์ฃผ๊ณ , ๋งŒ์ผ ์•„๋ฌด๊ฒƒ๋„ ์•ˆ๋„˜๊ฒจ์ฃผ๋ฉด ์ดˆ๊นƒ๊ฐ’์€ undefined์ผ ๊ฒƒ์ด๋‹ค.\r\nํ›…์˜ ๋ฐ˜ํ™˜ ๊ฐ’์€ ๋ฐฐ์—ด์ด๊ณ , ๋ฐฐ์—ด์˜ ์ฒซ ๋ฒˆ์งธ ์›์†Œ๋Š” state ๊ฐ’ ์ž์ฒด์ด๋ฉฐ, ๋‘ ๋ฒˆ์งธ ์›์†Œ๋Š” setState ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ํ•ด๋‹น state ๊ฐ’์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ๋‹ค.\r\n\r\n\r\n**๋ฆฌ์•กํŠธ์—์„œ ๋ Œ๋”๋ง์€ ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ์˜ return์„ ์‹คํ–‰ํ•œ ๋‹ค์Œ, ์‹คํ–‰ ๊ฒฐ๊ณผ๋ฅผ ์ด์ „์˜ ๋ฆฌ์•กํŠธ ํŠธ๋ฆฌ์™€ ๋น„๊ตํ•ด ๋ฆฌ๋ Œ๋”๋ง์ด ํ•„์š”ํ•œ ๋ถ€๋ถ„๋งŒ ์—…๋ฐ์ดํŠธํ•ด ์ด๋ค„์ง„๋‹ค.**\r\n๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ๋ Œ๋”๋ง ๋ฐฉ์‹์ด๋ž‘ ๋ฉ”์ปค๋‹ˆ์ฆ˜์ด ๋‹ค๋ฅธ ๋ณ€์ˆ˜๋ฅผ ํ†ตํ•ด์„œ ์ƒํƒœ๊ฐ’์„ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์€ ์ ์ ˆํ•˜์ง€ ๋ชปํ•˜๋‹ค. (์ด์ „ ๊ธ€ react virtualDOM ์ฐธ๊ณ )\r\n\r\n๊ทธ๋ ‡๋‹ค๋ฉด ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ์‚ดํŽด๋ณด์ž.\r\n\r\n```js\r\nimport React from 'react'\r\n\r\nconst Component = () => {\r\n const [,triggerRender] = useState()\r\n let state = 'hello'\r\n\r\n function handleButtonClick() {\r\n state = 'hi'\r\n triggerRender()\r\n }\r\n return (\r\n <>\r\n <h1>{state}</h1>\r\n <button onClick={handleButtonClick}>hi</button>\r\n </>\r\n )\r\n}\r\n```\r\nuseState ๋ฐ˜ํ™˜๊ฐ’์˜ ๋‘ ๋ฒˆ์งธ ์›์†Œ๋ฅผ ์‹คํ–‰ํ•ด ๋ฆฌ์•กํŠธ์— ๋ Œ๋”๋ง์ด ์ผ์–ด๋‚˜๊ฒŒ๋” ๋ณ€๊ฒฝํ–ˆ๋‹ค. \r\n๊ทธ๋Ÿผ์—๋„ ์—ฌ์ „ํžˆ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ state์˜ ๋ณ€๊ฒฝ๋œ ๊ฐ’์ด ๋ Œ๋”๋ง๋˜๊ณ  ์žˆ์ง€ ์•Š๋‹ค. \r\n\r\n๊ทธ ์ด์œ ๋Š” ๋ฆฌ์•กํŠธ์˜ ๋ Œ๋”๋ง์€ **ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ˜ํ™˜ํ•œ ๊ฒฐ๊ณผ๋ฌผ์ธ return์˜ ๊ฐ’์„ ๋น„๊ตํ•ด ์‹คํ–‰๋˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.** \r\n\r\n์ฆ‰, ๋งค๋ฒˆ ๋ Œ๋”๋ง์ด ๋ฐœ์ƒํ•  ๋•Œ๋งˆ๋‹ค ํ•จ์ˆ˜๋Š” ์ƒˆ๋กญ๊ฒŒ ์‹คํ–‰์ด ๋˜๊ณ , ์‹คํ–‰ํ•œ ํ•จ์ˆ˜์—์„œ state๋Š” ๋งค๋ฒˆ hello๋กœ ์ดˆ๊ธฐํ™” ๋˜๋ฏ€๋กœ ์•„๋ฌด๋ฆฌ state๋ฅผ ๋ณ€๊ฒฝํ•ด๋„ hello๋กœ ์ดˆ๊ธฐํ™” ๋˜๋Š” ๊ฒƒ์ด๋‹ค. \r\n\r\n๊ทผ๋ฐ ๋ Œ๋”๋ง์ด ๋  ๋•Œ๋งˆ๋‹ค ์ดˆ๊ธฐํ™”๋˜๋Š” ๋ณ€์ˆ˜(๊ฐ’)์™€๋Š” ๋‹ฌ๋ฆฌ, useState์˜ ๊ฒฐ๊ณผ๊ฐ’์€ ์–ด๋–ป๊ฒŒ ๊ทธ ๊ฐ’์„ ์œ ์ง€ํ• ๊นŒ?\r\n\r\nuseState์˜ ๊ฒฐ๊ณผ ๊ฐ’์ด ์œ ์ง€๋˜๋„๋ก, state๋ฅผ ํ•จ์ˆ˜๋กœ ํ•˜์—ฌ state ๊ฐ’์„ ํ˜ธ์ถœํ•  ๋•Œ๋งˆ๋‹ค ํ˜„์žฌ state๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ฒŒ ํ•ด๋ณด์ž.\r\n```js\r\nfunction useState(initialValue) {\r\n\tlet initialState = initialValue;\r\n\t\r\n\tfunction state() {\r\n\t\treturn initialState\r\n\t}\r\n\tfunction setState(newValue) {\r\n\t\tinitialState = newValue\r\n\t}\r\n\treturn [state, setState];\r\n}\r\nconst [value, setState] = useState(0);\r\nsetValue(1);\r\nconsole.log(value()); // 1\r\n```\r\n์œ„์˜ ์ฝ”๋“œ๋„ ๋‚˜์˜์ง„ ์•Š์ง€๋งŒ, ์šฐ๋ฆฌ์—๊ฒŒ ์ต์ˆ™ํ•œ useStateํ›…์€ state๋ฅผ ํ•จ์ˆ˜๊ฐ€ ์•„๋‹Œ ์ƒ์ˆ˜์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋‹ค.\r\n\r\n## ํด๋กœ์ €๋ฅผ ์ด์šฉํ•ด ์ƒํƒœ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” useState\r\n์ด๋ฅผ ์œ„ํ•ด์„œ ๋ฆฌ์•กํŠธ๋Š” **ํด๋กœ์ €**๋ฅผ ์ด์šฉํ•œ ๊ฒƒ์ด๋‹ค. \r\nuseState๋Š” ํด๋กœ์ €๋ฅผ ํ†ตํ•ด useState ๋‚ด๋ถ€์˜ ์„ ์–ธ๋œ ํ•จ์ˆ˜(setState)๊ฐ€ ํ•จ์ˆ˜์˜ ์‹คํ–‰์ด ์ข…๋ฃŒ๋œ ์ดํ›„(useState๊ฐ€ ํ˜ธ์ถœ๋œ ์ดํ›„)์—๋„ ์ง€์—ญ๋ณ€์ˆ˜์ธ state๋ฅผ ๊ณ„์† ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋‹ค.\r\n\r\nuseState ์ž‘๋™ ๋ฐฉ์‹์„ ๋Œ€๋žต์ ์œผ๋กœ ํ‰๋‚ด ๋‚ธ ์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.\r\n\r\n```js\r\nconst MyReact = (function() {\r\n\tconst global = {}\r\n let index = 0\r\n \r\n function useState(initialState){\r\n \tif(!global.states) {\r\n \t// ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์ฒด์˜ states ๋ฐฐ์—ด ์ดˆ๊ธฐํ™”, ์ตœ์ดˆ ์ ‘๊ทผ์ด๋ฉด ๋นˆ ๋ฐฐ์—ด๋กœ\r\n \tglobal.states = []\r\n }\r\n // states ์ •๋ณด๋ฅผ ์กฐํšŒํ•ด์„œ, ํ˜„์žฌ ์ƒํƒœ๊ฐ’์ด ์žˆ๋Š”์ง€ ํ™•์ธ\r\n // ์—†๋‹ค๋ฉด ์ดˆ๊นƒ๊ฐ’์œผ๋กœ ์„ค์ •\r\n const currentState = global.states[index] || initialState\r\n // ์œ„์—์„œ ์กฐํšŒํ•œ ๊ฐ’์œผ๋กœ states์˜ ๊ฐ’ ์—…๋ฐ์ดํŠธ\r\n global.states[index] = currentState\r\n \r\n // ์ฆ‰์‹œ์‹คํ–‰ํ•จ์ˆ˜๋กœ setter ๋งŒ๋“ฌ\r\n const setState = (function() {\r\n \t// ํด๋กœ์ €๋กœ index๋ฅผ ๊ฐ€๋‘ฌ๋‘์–ด์„œ ๋™์ผํ•œ index์— ์ ‘๊ทผ์ด ๊ฐ€๋Šฅ\r\n \tlet currentIndex = index\r\n return function(value){\r\n \tglobal.states[currentIndex] = value\r\n //์ปดํฌ๋„ŒํŠธ ๋ Œ๋”๋ง์ด ๋“ค์–ด๊ฐ€๋Š” ๋ถ€๋ถ„์ด๋‹ค.(์‹ค์ œ ์ฝ”๋“œ๋Š” ์ƒ๋žต)\r\n }\r\n })()\r\n // useState๋ฅผ ์“ธ ๋•Œ๋งˆ๋‹ค index๋ฅผ ํ•˜๋‚˜์”ฉ ์ถ”๊ฐ€ํ•˜๋Š”๋ฐ, ์ด๋Š” ํ•˜๋‚˜์˜ state๋งˆ๋‹ค\r\n // index๊ฐ€ ํ• ๋‹น๋˜์–ด์žˆ์–ด, ๊ทธ index๊ฐ€ ๋ฐฐ์—ด์˜ ๊ฐ’(global.states)๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ณ ,\r\n // ํ•„์š”ํ•  ๋•Œ๋งˆ๋‹ค ๊ทธ ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๊ฒŒ ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.\r\n index = index + 1\r\n \r\n return [currentState,setState]\r\n}\r\n\r\nfunction Component() {\r\n\tconst [value, setValue] = useState(0);\r\n}\r\n})();\r\n```\r\n\r\n์‹ค์ œ ๋ฆฌ์•กํŠธ ์ฝ”๋“œ์—์„œ๋Š” useReducer๋ฅผ ์ด์šฉํ•ด ๊ตฌํ˜„๋˜์–ด ์žˆ์–ด ์•ฝ๊ฐ„์˜ ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค.\r\n\r\n์•„๋ฌดํŠผ ์—ฌ๊ธฐ์„œ ํ•จ์ˆ˜์˜ ์‹คํ–‰์ด ๋๋‚ฌ์Œ์—๋„ ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋œ ํ™˜๊ฒฝ์„ ๊ธฐ์–ตํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ๋ฐ”๋กœ ํด๋กœ์ €์ธ ๊ฒƒ์ด๋‹ค. ๋งŒ์•ฝ ํด๋กœ์ €๊ฐ€ ์—†๋‹ค๋ฉด, `setState`๋Š” ํ•ญ์ƒ `index`์˜ ํ˜„์žฌ ๊ฐ’์— ์˜์กดํ•˜๊ฒŒ ๋œ๋‹ค. ์ฆ‰, ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—ฌ๋Ÿฌ ์ƒํƒœ๋ฅผ ๊ฐ–๊ณ  ์žˆ์„ ๋•Œ ๋งˆ์ง€๋ง‰ `index`๋งŒ ์ฐธ์กฐํ•˜๋ฏ€๋กœ, `setState`๊ฐ€ ์˜ฌ๋ฐ”๋ฅธ ์œ„์น˜๋ฅผ ์ฐธ์กฐํ•˜์ง€ ์•Š๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด๋‹ค.\r\n\r\n๋งค๋ฒˆ ์‹คํ–‰๋˜๋Š” ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ ํ™˜๊ฒฝ์—์„œ state์˜ ๊ฐ’์„ ์œ ์ง€ํ•˜๊ณ  ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๋ฆฌ์•กํŠธ๋Š” ํด๋กœ์ €๋ฅผ ํ™œ์šฉํ•˜๊ณ  ์žˆ๋‹ค.\r\n\r\n`\r\nํ›…์— ๋Œ€ํ•œ ๊ตฌํ˜„์ฒด๋ฅผ github์—์„œ ํƒ€๊ณ  ์˜ฌ๋ผ๊ฐ€๋‹ค๋ณด๋ฉด __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED ๋ผ๋Š” ๋ฌธ๊ตฌ๋ฅผ ๋งŒ๋‚˜๊ฒŒ๋œ๋‹ค(๋ฌด์„ญ๋‹ค ใ…‹ใ…‹)\r\n์œ„์˜ ์ฝ”๋“œ๋Š” Preact์˜ ๊ตฌํ˜„์„ ๊ธฐ์ค€์œผ๋กœ ํ•˜๊ณ  ์žˆ๋‹ค. Preact๋Š” react์˜ ๊ฒฝ๋Ÿ‰ํ™” ๋ฒ„์ „์œผ๋กœ,\r\n๋Œ€๋ถ€๋ถ„์˜ ๋ฆฌ์•กํŠธ API๋ฅผ ์ง€์›ํ•˜๊ณ  ์žˆ๋‹ค. \r\n`\r\n## ๊ฒฐ๋ก \r\nReact์˜ `useState`๋Š” ํด๋กœ์ €๋ฅผ ํ†ตํ•ด ์ƒํƒœ๊ฐ’์„ ์•ˆ์ •์ ์œผ๋กœ ์œ ์ง€ํ•˜๋ฉฐ, ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—ฌ๋Ÿฌ ๋ฒˆ ํ˜ธ์ถœ๋˜๋”๋ผ๋„ **๊ฐ ์ƒํƒœ๊ฐ’์ด ๊ณ ์œ ํ•œ ์œ„์น˜์— ์ €์žฅ**๋  ์ˆ˜ ์žˆ๊ฒŒ ํ•œ๋‹ค. `useState`๊ฐ€ ๋ฐ˜ํ™˜ํ•˜๋Š” `setState` ํ•จ์ˆ˜๋Š” ์ƒ์„ฑ ๋‹น์‹œ์˜ ์ƒํƒœ ์œ„์น˜(`index`)๋ฅผ ํด๋กœ์ €๋กœ ์บก์ฒ˜ํ•˜์—ฌ, ํ•ด๋‹น ์ƒํƒœ๊ฐ’๋งŒ ์ •ํ™•ํžˆ ์—…๋ฐ์ดํŠธํ•˜๋„๋ก ๊ตฌํ˜„๋˜์–ด ์žˆ๋‹ค.\r\n\r\n์ •๋ฆฌํ•˜์ž๋ฉด, ํด๋กœ์ €๋Š” `setState`๊ฐ€ ํ•จ์ˆ˜๊ฐ€ ์„ ์–ธ๋œ ๋‹น์‹œ์˜ ํ™˜๊ฒฝ์„ ์œ ์ง€ํ•˜๊ฒŒ ํ•ด์ฃผ๊ธฐ ๋•Œ๋ฌธ์— **์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋งค๋ฒˆ ์žฌ์‹คํ–‰๋  ๋•Œ๋งˆ๋‹ค ์ƒํƒœ๊ฐ€ ์ดˆ๊ธฐํ™”๋˜๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€**ํ•˜๊ณ , ์ƒํƒœ๊ฐ€ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ์œ ์ง€๋  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ค€๋‹ค.\r\n\r\n**์ฐธ๊ณ **\r\n\r\n[์„œ์ ] ๋ชจ๋˜ ๋ฆฌ์•กํŠธ Deep Dive\r\n"}]},"__N_SSG":true}
1 change: 1 addition & 0 deletions _next/data/ouFxnvAPXOOQRIKArTLFG/posts/tag/react.json

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"pageProps":{"tags":["react","JavaScript","deepdive","useState","hook","ํด๋กœ์ €","์ƒ๋ช…์ฃผ๊ธฐ","Virtual DOM","Algorithm","๋ฐฑ์ค€","gold","dfs","ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค","lv3","bfs","์ด๋ถ„ํƒ์ƒ‰"],"currentTag":"๋ฐฑ์ค€","posts":[{"slug":"posts/Algorithm/[๋ฐฑ์ค€ gold 5] ๋นŒ๋Ÿฐ ํ˜ธ์„","title":"[๋ฐฑ์ค€ gold 5] ๋นŒ๋Ÿฐ ํ˜ธ์„","date":"2024-08-09T17:05:24.000Z","image":"index.png","summary":"dfs์„ ํ™œ์šฉํ•œ ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค [level 3] ์ง•๊ฒ€๋‹ค๋ฆฌ ๊ฑด๋„ˆ๊ธฐ ๋ฌธ์ œ ํ’€์ด ์ž…๋‹ˆ๋‹ค.","tags":["Algorithm","๋ฐฑ์ค€","gold","dfs"],"content":"# [gold 3] ๋นŒ๋Ÿฐ ํ˜ธ์„\r\n\r\n## ๋ฌธ์ œ ์„ค๋ช…\r\n\r\n์น˜๋ฅด๋ณด๊ธฐ ๋นŒ๋”ฉ์€ 11์ธต๋ถ€ํ„ฐ NN์ธต๊นŒ์ง€ ์ด์šฉ์ด ๊ฐ€๋Šฅํ•œ ์—˜๋ฆฌ๋ฒ ์ดํ„ฐ๊ฐ€ ์žˆ๋‹ค. ์—˜๋ฆฌ๋ฒ ์ดํ„ฐ์˜ ์ธต์ˆ˜๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๋””์Šคํ”Œ๋ ˆ์ด์—๋Š” KK ์ž๋ฆฌ์˜ ์ˆ˜๊ฐ€ ๋ณด์ธ๋‹ค. ์ˆ˜๋Š” 00์œผ๋กœ ์‹œ์ž‘ํ•  ์ˆ˜๋„ ์žˆ๋‹ค. 00๋ถ€ํ„ฐ 99๊นŒ์ง€์˜ ๊ฐ ์ˆซ์ž๊ฐ€ ๋””์Šคํ”Œ๋ ˆ์ด์— ๋ณด์ด๋Š” ๋ฐฉ์‹์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค. ๊ฐ ์ˆซ์ž๋Š” 7๊ฐœ์˜ ํ‘œ์‹œ๋“ฑ ์ค‘์˜ ์ผ๋ถ€์— ๋ถˆ์ด ๋“ค์–ด์˜ค๋ฉด์„œ ํ‘œํ˜„๋œ๋‹ค.\r\n\r\n![](1.png)\r\n\r\n์˜ˆ๋ฅผ ๋“ค์–ด K=4K=4์ธ ๊ฒฝ์šฐ์— 16801680์ธต๊ณผ 501501์ธต์€ ์•„๋ž˜์™€ ๊ฐ™์ด ๋ณด์ธ๋‹ค.\r\n\r\n![](2.png)\r\n\r\n\r\n\r\n๋นŒ๋Ÿฐ ํ˜ธ์„์€ ์น˜๋ฅด๋ณด๊ธฐ ๋นŒ๋”ฉ์˜ ์—˜๋ฆฌ๋ฒ ์ดํ„ฐ ๋””์Šคํ”Œ๋ ˆ์ด์˜ LED ์ค‘์—์„œ ์ตœ์†Œ 11๊ฐœ, ์ตœ๋Œ€ PP๊ฐœ๋ฅผ ๋ฐ˜์ „์‹œํ‚ฌ ๊ณ„ํš์„ ์„ธ์šฐ๊ณ  ์žˆ๋‹ค. ๋ฐ˜์ „์ด๋ž€ ์ผœ์ง„ ๋ถ€๋ถ„์€ ๋„๊ณ , ๊บผ์ง„ ๋ถ€๋ถ„์€ ์ผœ๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ์ˆซ์ž 11์„ 22๋กœ ๋ฐ”๊พธ๋ ค๋ฉด ์ด 5๊ฐœ์˜ LED๋ฅผ ๋ฐ˜์ „์‹œ์ผœ์•ผ ํ•œ๋‹ค. ๋˜ํ•œ ๋ฐ˜์ „ ์ดํ›„์— ๋””์Šคํ”Œ๋ ˆ์ด์— ์˜ฌ๋ฐ”๋ฅธ ์ˆ˜๊ฐ€ ๋ณด์—ฌ์ง€๋ฉด์„œ 11 ์ด์ƒ NN ์ดํ•˜๊ฐ€ ๋˜๋„๋ก ๋ฐ”๊ฟ”์„œ ์‚ฌ๋žŒ๋“ค์„ ํ—ท๊ฐˆ๋ฆฌ๊ฒŒ ํ•  ์˜ˆ์ •์ด๋‹ค. ์น˜๋ฅด๋ณด๊ธฐ๋ฅผ ์‚ฌ๋ž‘ํ•˜๋Š” ๋ชจ์ž„์˜ ํšŒ์›์ธ ๋‹น์‹ ์€ ํ˜ธ์„ ๋นŒ๋Ÿฐ์˜ ํ–‰๋™์„ ๋ฏธ๋ฆฌ ํŒŒ์•…ํ•ด์„œ ํ˜ผ์ญ์„ ๋‚ด์ฃผ๊ณ ์ž ํ•œ๋‹ค. ํ˜„์žฌ ์—˜๋ฆฌ๋ฒ ์ดํ„ฐ๊ฐ€ ์‹ค์ œ๋กœ๋Š” XX์ธต์— ๋ฉˆ์ถฐ์žˆ์„ ๋•Œ, ํ˜ธ์„์ด๊ฐ€ ๋ฐ˜์ „์‹œํ‚ฌ LED๋ฅผ ๊ณ ๋ฅผ ์ˆ˜ ์žˆ๋Š” ๊ฒฝ์šฐ์˜ ์ˆ˜๋ฅผ ๊ณ„์‚ฐํ•ด๋ณด์ž.\r\n\r\n### ์ž…๋ ฅ\r\n\r\nโ€ŠN,K,P,XN,K,P,X ๊ฐ€ ๊ณต๋ฐฑ์œผ๋กœ ๊ตฌ๋ถ„๋˜์–ด ์ฒซ์งธ ์ค„์— ์ฃผ์–ด์ง„๋‹ค.\r\n\r\n### ์ถœ๋ ฅ\r\n\r\nํ˜ธ์„ ๋นŒ๋Ÿฐ์ด ์—˜๋ฆฌ๋ฒ ์ดํ„ฐ LED๋ฅผ ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๋ฐ˜์ „์‹œํ‚ฌ ์ˆ˜ ์žˆ๋Š” ๊ฒฝ์šฐ์˜ ์ˆ˜๋ฅผ ๊ณ„์‚ฐํ•ด๋ณด์ž.\r\n\r\n## ์ ‘๊ทผ ๋ฐฉ๋ฒ•\r\n\r\n์ˆซ์ž์— ๋”ฐ๋ฅธ LED๋ฅผ ๋จผ์ € ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด, \r\n\r\n๊ทธ๋ฆผ๊ณผ ๊ฐ™์ด, ๊ฐ LED์˜ ์œ„์น˜์— ๋ฒˆํ˜ธ๋ฅผ ๋งค๊ฒจ, ๋ฐฐ์—ด์•ˆ์— ๊ทธ ๋ฒˆํ˜ธ๊ฐ€ ์žˆ์œผ๋ฉด ๋ถˆ์ด ์ผœ์ ธ์žˆ๋Š” ๊ฒƒ์œผ๋กœ, ์—†๋‹ค๋ฉด ๋ถˆ์ด ๊บผ์ ธ ์žˆ๋Š” ๊ฒƒ์œผ๋กœ ํ‘œํ˜„ํ•˜์˜€๋‹ค.\r\n<img src=\"3.png\" alt=\"์ด๋ฏธ์ง€ ์„ค๋ช…\" width=\"200\" height=\"300\" />\r\n\r\n\r\n๊ทธ๋ฆผ์ฒ˜๋Ÿผ 0์„ ํ‘œํ˜„ํ•˜๋ฉด 3๋ฒˆ์ž๋ฆฌ๋ฅผ ์ œ์™ธํ•œ ๋ชจ๋“  ๋ฒˆํ˜ธ๊ฐ€ ์ผœ์ ธ์žˆ์œผ๋ฏ€๋กœ, `[0,1,2,4,5,6]`์œผ๋กœ ํ‘œํ˜„ ํ•  ์ˆ˜ ์žˆ๋‹ค.\r\n\r\n๊ฐ ๋ฒˆํ˜ธ๋ฅผ ์ด์™€ ๊ฐ™์ด ๋ฐ”๊พธ์–ด numbers ๋ฐฐ์—ด์— ์ €์žฅํ•˜๋ฉด, ์ด์™€ ๊ฐ™๋‹ค.\r\n```python\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n```\r\n์ดํ›„ ๋งŒ์ผ ํ˜„์žฌ ๋ฒˆํ˜ธ์™€ ๋น„๊ตํ•  ๋ฒˆํ˜ธ์˜ LED๋ฅผ ๋น„๊ตํ•˜๊ธฐ ์œ„ํ•ด ์„œ๋กœ์˜ ์ฐจ์ง‘ํ•ฉ์„ ๋”ํ•ด์„œ ๋‘ ๋ฒˆํ˜ธ๊ฐ€ ์„œ๋กœ๋ฅผ ๋น„๊ตํ–ˆ์„ ๋•Œ, ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ํ˜น์€ ์—†๋Š” ๋ฒˆํ˜ธ์˜ ๊ฐœ์ˆ˜๋ฅผ ๊ตฌํ•œ๋‹ค.\r\n```python\r\ncur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n```\r\n์ด์™€ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ๋ฐ˜์ „์‹œํ‚ฌ LED์˜ ๊ฐœ์ˆ˜๋ฅผ ๊ตฌํ•˜๊ณ , dfs๋ฅผ ํ™œ์šฉํ•˜์—ฌ x์˜ ๋ชจ๋“  ์ž๋ฆฟ์ˆ˜๋ฅผ ์ˆœํšŒํ•˜์—ฌ p๋ณด๋‹ค ์ž‘๊ฑฐ๋‚˜ ๊ฐ™๊ฒŒ LED๋ฅผ ๋ฐ˜์ „ํ•˜๋ฉด์„œ, n๋ณด๋‹ค ๋ฒˆํ˜ธ๊ฐ€ ์ž‘๊ฑฐ๋‚˜ ๊ฐ™๋‹ค๋ฉด result๋ฅผ 1 ์ฆ๊ฐ€ ์‹œํ‚จ๋‹ค.\r\n\r\n์ „์ฒด์ฝ”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.\r\n```python\r\nimport sys;\r\ninput = sys.stdin.readline;\r\n\r\nn,k,p,x = map(int, input().split());\r\nresult = 0;\r\nnumbers = [[0,1,2,4,5,6],[2,5],[0,2,3,4,6],[0,2,3,5,6],[1,2,3,5],[0,1,3,5,6],[0,1,3,4,5,6],[0,2,5],[0,1,2,3,4,5,6],[0,1,2,3,5,6]];\r\n\r\nx = list(str(x));\r\nif len(x) != k:\r\n\t# k ๋ณด๋‹ค ์ž๋ฆฟ์ˆ˜ x๊ฐ€ ์ž๋ฆฟ์ˆ˜๊ฐ€ ์ž‘๋‹ค๋ฉด ์ž‘์€ ๋งŒํผ ์•ž์— 0์„ ์ฑ„์›Œ์ฃผ์–ด์•ผ ํ•œ๋‹ค.\r\n for _ in range(k-len(x)):\r\n x.insert(0,'0');\r\n \r\ndef dfs(index,count,st):\r\n global result;\r\n if count>p:\r\n return;\r\n if index == k:\r\n if 0<count<=p and 0<int(st)<=n:\r\n result += 1;\r\n return;\r\n cur = set(numbers[int(x[index])]);\r\n for i in range(len(numbers)):\r\n compare = set(numbers[i]);\r\n cur_count = len(list(cur.difference(compare))) + len(list(compare.difference(cur)));\r\n if count + cur_count <=p:\r\n dfs(index+1,count + cur_count,st + str(i));\r\ndfs(0,0,'');\r\nprint(result);\r\n```\r\n\r\n## ๋Š๋‚€ ์ \r\n์‚ฌ์‹ค ์ด ๋ฌธ์ œ์™€ ๊ด€๋ จํ•˜์—ฌ ๋‹ค๋ฅธ ํ’€์ด๋„ ๋งŽ์ด ์ฐพ์•„๋ณด์•˜๊ณ , ๋”์šฑ ์‹œ๊ฐ„์ด ์ ๊ฒŒ ๊ฑธ๋ฆฌ๋Š” ํ’€์ด๋„ ๋งŽ์•˜์–ด์„œ ์‹œ๊ฐ„ ์ดˆ๊ณผ๋Š” ๋‚˜์ง€ ์•Š์•˜์ง€๋งŒ ๋‹ค์†Œ ๋น„ํšจ์œจ์ ์ธ ํ’€์ด์˜€๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ๋‹ค.\r\n\r\n๋˜ํ•œ ์ œํ•œ ์‚ฌํ•ญ์ค‘ `๋˜ํ•œ ๋ฐ˜์ „ ์ดํ›„์— ๋””์Šคํ”Œ๋ ˆ์ด์— ์˜ฌ๋ฐ”๋ฅธ ์ˆ˜๊ฐ€ ๋ณด์—ฌ์ง€๋ฉด์„œ 1 ์ด์ƒ N ์ดํ•˜๊ฐ€ ๋˜๋„๋ก ๋ฐ”๊ฟ”์„œ ์‚ฌ๋žŒ๋“ค์„ ํ—ท๊ฐˆ๋ฆฌ๊ฒŒ ํ•  ์˜ˆ์ •์ด๋‹ค.`๋ฅผ ๋ชป๋ด์„œ ๊ณ„์† `0<=int(st)<=n`๋กœ ์กฐ๊ฑด์„ ์„ค์ •ํ•ด๋†“๊ณ  ํ—ค๋งธ์—ˆ๋‹ค. ๋ฌธ์ œ์˜ ์กฐ๊ฑด์„ ์œ ์‹ฌํžˆ ๋ณด๋Š” ์Šต๊ด€์„ ๋“ค์—ฌ์•ผ ํ•จ์„ ๋‹ค์‹œํ•œ๋ฒˆ ๋Š๋‚€๋‹ค."}]},"__N_SSG":true}
Loading

0 comments on commit 851d3e4

Please sign in to comment.