๊ด€๋ฆฌ ๋ฉ”๋‰ด

๋ชฉ๋กJavaScript (9)

๋‹ญ๋ฐœ๊ฐœ๋ฐœ

[JS] var์™€ let

let๊ณผ var์€ JavaScript์—์„œ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋˜๋Š” ๋‘ ๊ฐ€์ง€ ํ‚ค์›Œ๋“œ ๋‘ ํ‚ค์›Œ๋“œ๋Š” ์Šค์ฝ”ํ”„ ๋ฐ ํ˜ธ์ด์ŠคํŒ…๊ณผ ๊ด€๋ จํ•˜์—ฌ ์ค‘์š”ํ•œ ์ฐจ์ด๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์Šค์ฝ”ํ”„: var๋Š” ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ฆ‰, ๋ณ€์ˆ˜๊ฐ€ ์„ ์–ธ๋œ ํ•จ์ˆ˜ ๋‚ด์—์„œ๋งŒ ์œ ํšจํ•˜๋ฉฐ ํ•จ์ˆ˜ ์™ธ๋ถ€์—์„œ๋Š” ์ ‘๊ทผํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. let์€ ๋ธ”๋ก ์Šค์ฝ”ํ”„๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋ธ”๋ก ๋‚ด์—์„œ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋Š” ๋ธ”๋ก ๋‚ด์—์„œ๋งŒ ์œ ํšจํ•˜๋ฉฐ ๋ธ”๋ก ์™ธ๋ถ€์—์„œ๋Š” ์ ‘๊ทผํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. function example() { if (true) { var x = 5; // ํ•จ์ˆ˜ ์Šค์ฝ”ํ”„ let y = 10; // ๋ธ”๋ก ์Šค์ฝ”ํ”„ } console.log(x); // 5 console.log(y); // ReferenceError: y is not defined } 2. ํ˜ธ์ด์ŠคํŒ…: var๋Š” ..

Javascript, jQuery 2023. 10. 18. 10:49
๋ Œ๋”๋ง rendering

๋‚˜๋Š” ๋ฆฌ์•กํŠธ์—์„œ ๋ Œ๋”๋ง ์ด์•ผ๊ธฐ๋งŒ ๋‚˜์˜ค๋ฉด ์ง€๋ ˆ ๊ฒ์„ ๋จน๋Š”๋‹ค. ๊ฐ€์žฅ ์–ด๋ ค์šด ๋ถ€๋ถ„์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. [์ƒํ™ฉ] ๋ถ€๋ชจ - ์ž์‹ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์žˆ์œผ๋ฉด ๋ถ€๋ชจ์—์„œ ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ, ์ž์‹ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฐ”๋€Œ์–ด์•ผ ํ•œ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๋ Œ๋”๋ง์ด ์•ˆ๋˜๊ณ  ์ž์‹ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฐ”๋กœ ๋ฐ”๋€Œ์ง€ ์•Š์Œ. ์šฐ๋ฆฌ๋Š” ๋ Œ๋”๋ง์ด ํ•„์š”ํ•œ ์ƒํ™ฉ! ๊ทธ๋Ÿฐ๋ฐ ๊ตฌ๊ธ€๋ง ํ•ด๋ณด๋ฉด ๋‹ค ๋ Œ๋”๋ง์„ ๋ง‰๋Š” ๊ธ€๋“ค ๋ฟ์ด์—ˆ๋‹ค. ํ•ด๊ฒฐํ•œ ๋ฐฉ๋ฒ•์€ ์‰ฌ์šด ๋ฐฉ๋ฒ•. [ํ•ด๊ฒฐ] ๋ณด์—ฌ์ค„ ๊ฐ’์ด ๋ฐ”๋€Œ์—ˆ๋‹ค๋Š”๊ฑธ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์•Œ ์ˆ˜ ์žˆ๋„๋ก "๊ฐ’์ด ๋ฐ”๋€œ"์„ state๋กœ ๊ด€๋ฆฌํ•œ๋‹ค. // ๋ถ€๋ชจ๊ฐ€ ์ž์‹์—๊ฒŒ ์šฐ๋ฆฌ ๋ณ€ํ–ˆ์–ด! ๋ผ๊ณ  ์•Œ๋ ค์ค„ ํžŒํŠธ const [initPage, setInitPage] = useState(false); useLayoutEffect(() => { setInitPage(true); }); if(์ˆ˜์ •์ด ์„ฑ๊ณตํ•˜๋ฉด)..

React 2023. 3. 7. 14:54