[TIL] 240512 (React state, Virtual DOM)

์†”ยท2024๋…„ 5์›” 12์ผ

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
39/268
post-thumbnail

๐Ÿฅž ์˜ค๋Š˜ ํ•œ ์ผ

  • ๋ฆฌ์•กํŠธ ์ž…๋ฌธ ๊ฐ•์˜
    • 2์ฃผ์ฐจ ์™„๊ฐ•
  • ์•Œ๊ณ ๋ฆฌ์ฆ˜ ์ฝ”๋“œ์นดํƒ€
    • ๋ง์น ํ•˜๊ธฐ

๐Ÿฝ๏ธ ๋ฌธ์ œ ํ•ด๊ฒฐ

์•Œ๊ณ ๋ฆฌ์ฆ˜ ์ฝ”๋“œ์นดํƒ€

๋ง์น ํ•˜๊ธฐ

๋ฌธ์ œ

์–ด๋А ํ•™๊ต์— ํŽ˜์ธํŠธ๊ฐ€ ์น ํ•ด์ง„ ๊ธธ์ด๊ฐ€ n๋ฏธํ„ฐ์ธ ๋ฒฝ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๋ฒฝ์— ๋™์•„๋ฆฌ ยท ํ•™ํšŒ ํ™๋ณด๋‚˜ ํšŒ์‚ฌ ์ฑ„์šฉ ๊ณต๊ณ  ํฌ์Šคํ„ฐ ๋“ฑ์„ ๊ฒŒ์‹œํ•˜๊ธฐ ์œ„ํ•ด ํ…Œ์ดํ”„๋กœ ๋ถ™์˜€๋‹ค๊ฐ€ ์ฒ ๊ฑฐํ•  ๋•Œ ๋–ผ๋Š” ์ผ์ด ๋งŽ๊ณ  ๊ทธ ๊ณผ์ •์—์„œ ํŽ˜์ธํŠธ๊ฐ€ ๋ฒ—๊ฒจ์ง€๊ณค ํ•ฉ๋‹ˆ๋‹ค. ํŽ˜์ธํŠธ๊ฐ€ ๋ฒ—๊ฒจ์ง„ ๋ฒฝ์ด ๋ณด๊ธฐ ํ‰ํ•ด์ ธ ํ•™๊ต๋Š” ๋ฒฝ์— ํŽ˜์ธํŠธ๋ฅผ ๋ง์น ํ•˜๊ธฐ๋กœ ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋„“์€ ๋ฒฝ ์ „์ฒด์— ํŽ˜์ธํŠธ๋ฅผ ์ƒˆ๋กœ ์น ํ•˜๋Š” ๋Œ€์‹ , ๊ตฌ์—ญ์„ ๋‚˜๋ˆ„์–ด ์ผ๋ถ€๋งŒ ํŽ˜์ธํŠธ๋ฅผ ์ƒˆ๋กœ ์น  ํ•จ์œผ๋กœ์จ ์˜ˆ์‚ฐ์„ ์•„๋ผ๋ ค ํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฅผ ์œ„ํ•ด ๋ฒฝ์„ 1๋ฏธํ„ฐ ๊ธธ์ด์˜ ๊ตฌ์—ญ n๊ฐœ๋กœ ๋‚˜๋ˆ„๊ณ , ๊ฐ ๊ตฌ์—ญ์— ์™ผ์ชฝ๋ถ€ํ„ฐ ์ˆœ์„œ๋Œ€๋กœ 1๋ฒˆ๋ถ€ํ„ฐ n๋ฒˆ๊นŒ์ง€ ๋ฒˆํ˜ธ๋ฅผ ๋ถ™์˜€์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ํŽ˜์ธํŠธ๋ฅผ ๋‹ค์‹œ ์น ํ•ด์•ผ ํ•  ๊ตฌ์—ญ๋“ค์„ ์ •ํ–ˆ์Šต๋‹ˆ๋‹ค.

๋ฒฝ์— ํŽ˜์ธํŠธ๋ฅผ ์น ํ•˜๋Š” ๋กค๋Ÿฌ์˜ ๊ธธ์ด๋Š” m๋ฏธํ„ฐ์ด๊ณ , ๋กค๋Ÿฌ๋กœ ๋ฒฝ์— ํŽ˜์ธํŠธ๋ฅผ ํ•œ ๋ฒˆ ์น ํ•˜๋Š” ๊ทœ์น™์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • ๋กค๋Ÿฌ๊ฐ€ ๋ฒฝ์—์„œ ๋ฒ—์–ด๋‚˜๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค.
  • ๊ตฌ์—ญ์˜ ์ผ๋ถ€๋ถ„๋งŒ ํฌํ•จ๋˜๋„๋ก ์น ํ•˜๋ฉด ์•ˆ ๋ฉ๋‹ˆ๋‹ค.

์ฆ‰, ๋กค๋Ÿฌ์˜ ์ขŒ์šฐ์ธก ๋์„ ๊ตฌ์—ญ์˜ ๊ฒฝ๊ณ„์„  ํ˜น์€ ๋ฒฝ์˜ ์ขŒ์šฐ์ธก ๋๋ถ€๋ถ„์— ๋งž์ถ˜ ํ›„ ๋กค๋Ÿฌ๋ฅผ ์œ„์•„๋ž˜๋กœ ์›€์ง์ด๋ฉด์„œ ๋ฒฝ์„ ์น ํ•ฉ๋‹ˆ๋‹ค. ํ˜„์žฌ ํŽ˜์ธํŠธ๋ฅผ ์น ํ•˜๋Š” ๊ตฌ์—ญ๋“ค์„ ์™„์ „ํžˆ ์น ํ•œ ํ›„ ๋ฒฝ์—์„œ ๋กค๋Ÿฌ๋ฅผ ๋–ผ๋ฉฐ, ์ด๋ฅผ ๋ฒฝ์„ ํ•œ ๋ฒˆ ์น ํ–ˆ๋‹ค๊ณ  ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.

ํ•œ ๊ตฌ์—ญ์— ํŽ˜์ธํŠธ๋ฅผ ์—ฌ๋Ÿฌ ๋ฒˆ ์น ํ•ด๋„ ๋˜๊ณ  ๋‹ค์‹œ ์น ํ•ด์•ผ ํ•  ๊ตฌ์—ญ์ด ์•„๋‹Œ ๊ณณ์— ํŽ˜์ธํŠธ๋ฅผ ์น ํ•ด๋„ ๋˜์ง€๋งŒ ๋‹ค์‹œ ์น ํ•˜๊ธฐ๋กœ ์ •ํ•œ ๊ตฌ์—ญ์€ ์ ์–ด๋„ ํ•œ ๋ฒˆ ํŽ˜์ธํŠธ์น ์„ ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ์‚ฐ์„ ์•„๋ผ๊ธฐ ์œ„ํ•ด ๋‹ค์‹œ ์น ํ•  ๊ตฌ์—ญ์„ ์ •ํ–ˆ๋“ฏ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๋กค๋Ÿฌ๋กœ ํŽ˜์ธํŠธ์น ์„ ํ•˜๋Š” ํšŸ์ˆ˜๋ฅผ ์ตœ์†Œํ™”ํ•˜๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

์ •์ˆ˜ n, m๊ณผ ๋‹ค์‹œ ํŽ˜์ธํŠธ๋ฅผ ์น ํ•˜๊ธฐ๋กœ ์ •ํ•œ ๊ตฌ์—ญ๋“ค์˜ ๋ฒˆํ˜ธ๊ฐ€ ๋‹ด๊ธด ์ •์ˆ˜ ๋ฐฐ์—ด section์ด ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ฃผ์–ด์งˆ ๋•Œ ๋กค๋Ÿฌ๋กœ ํŽ˜์ธํŠธ์น ํ•ด์•ผ ํ•˜๋Š” ์ตœ์†Œ ํšŸ์ˆ˜๋ฅผ return ํ•˜๋Š” solution ํ•จ์ˆ˜๋ฅผ ์ž‘์„ฑํ•ด ์ฃผ์„ธ์š”.

๋‚ด ํ’€์ด

function solution(n, m, section) {
    let arr = [];
    let count = 0;
    for (let i=1; i<=n; i++){
        arr.push(i);
    }
    for (let i=0; i<section.length; i++){
        if (arr.includes(section[i])){
            arr.splice(arr.indexOf(section[i]), m);
            count++;
        }
    }
    return count;
}

์ผ๋‹จ n์˜ ๊ฐœ์ˆ˜๋งŒํผ์˜ arr ๋ฐฐ์—ด์„ ๋งŒ๋“ค์–ด์คฌ๊ณ , arr ๋‚ด์— section์˜ ์š”์†Œ๊ฐ€ ๋“ค์–ด๊ฐ€์žˆ์„ ๊ฒฝ์šฐ, ํ•ด๋‹น ์š”์†Œ๋ถ€ํ„ฐ m๋งŒํผ ์ž˜๋ผ์คŒ์œผ๋กœ ์ด๋ฏธ ์ง€์šด section์˜ ์š”์†Œ๋Š” ์ฐพ์„ ์ˆ˜ ์—†๊ฒŒ ํ•ด ๊ฒน์น˜๋Š” ๊ฒŒ ์—†๋„๋ก ํ•ด์„œ ํ’€์–ด๋ƒˆ๋‹ค.

๐Ÿช ๋ฐฐ์šด ๊ฒƒ

๋ฆฌ์•กํŠธ ์ž…๋ฌธ 2์ฃผ์ฐจ

  • state
  • ์ปดํฌ๋„ŒํŠธ ๋ฐ ๋ Œ๋”๋ง
  • DOM๊ณผ Virtual DOM
  • ์นด์šดํ„ฐ ์•ฑ ์‹ค์Šต
  • ์Šคํƒ€์ผ๋ง ๋ฐ refactoring

๐Ÿด ๋А๋‚€ ์ 

  • ๋ฆฌ์•กํŠธ๊ฐ€ ์•„์ง๊นŒ์ง„ ์ƒ๋‹นํžˆ ์žฌ๋ฐŒ์–ด์„œ ๋‹คํ–‰์ด๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ฝ”๋“œ์นดํƒ€๋Š” ์ ์  ๋” ์–ด๋ ค์›Œ์ง„๋‹ค...

๐Ÿณ ๋‚ด์ผ ํ•  ์ผ

  • ๋ฆฌ์•กํŠธ ์ž…๋ฌธ์ฃผ์ฐจ ๊ฐœ์ธ๊ณผ์ œ ์‹œ์ž‘ (์ตœ๋Œ€ํ•œ ๋งˆ๋ฌด๋ฆฌ๊นŒ์ง€ ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๊ธฐ)
profile
์›น ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

0๊ฐœ์˜ ๋Œ“๊ธ€