๋ชฉ๋กuseEffect (2)

ram2 ๐Ÿš—

[react] dropdown ๋งŒ๋“ค๊ธฐ (์•„์ด์ฝ˜, ๋“œ๋กญ๋‹ค์šด)

์ด์ „์— react์—์„œ ์ œ๊ณตํ•˜๋Š” dropdown ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ปค์Šคํ…€ ํ•œ ์ ์ด ์žˆ๋‹ค. ํ•˜์ง€๋งŒ ๋‚ด๊ฐ€ ์ด๋ฒˆ์— ๋งŒ๋“ค์–ด์•ผ ํ•˜๋Š” ๋“œ๋กญ๋‹ค์šด์€ ํ•ด๋‹น ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ปค์Šคํ…€ํ•ด์„œ๋Š” ํ•  ์ˆ˜ ์—†์—ˆ๋‹ค. ์•ฝ 20๋ถ„์ •๋„ ํ•ด๋ณด๊ณ  ์•ˆ๋˜๋‹ˆ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์„ ์ฐพ์•„๋ณด๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. ๋‚ด๊ฐ€ ํ•˜๊ณ  ์‹ถ์€ ๊ฑด, ์•„์ด์ฝ˜์„ ๋ˆŒ๋ €์„ ๋•Œ ๋“œ๋กญ๋ฐ•์Šค๊ฐ€ ๋‚˜์˜ค๋Š” ๊ฒƒ์ด์—ˆ๋Š”๋ฐ ์ด๋Ÿฌํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ฐพ์•„๋ดค์œผ๋‚˜, ๊ตฌ๋…์„ ํ•˜๊ฑฐ๋‚˜ ๋ˆ์„ ๋‚ด์•ผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ถ€๋ถ„์ด์—ˆ๋‹ค. ๊ณ ๋ฏผ ๋์— ๊ทธ๋ƒฅ ๋งŒ๋“ค๊ธฐ๋กœ ํ–ˆ๋‹ค. ๋Œ€๋žต์ ์ธ ์ƒ๊ฐ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. 1. ์•„์ด์ฝ˜ ๋ฒ„ํŠผ์„ ์ƒ์„ฑํ•œ๋‹ค. 2. ๋ฒ„ํŠผ์„ ํด๋ฆญ ํ–ˆ์„ ๋•Œ dropdown์„ ๋ณด์—ฌ์ค€๋‹ค. 3. dropdown ์ปจํ…Œ์ด๋„ˆ ์•ˆ์— ๊ฐ list์— ๋ผ์šฐํ„ฐ๋ฅผ ์—ฐ๊ฒฐํ•ด ์›ํ•˜๋Š” ํŽ˜์ด์ง€๋กœ ์ด๋™์‹œํ‚จ๋‹ค. 1. ์•„์ด์ฝ˜ ๋ฒ„ํŠผ ์ƒ์„ฑํ•˜๊ธฐ ์ด๋ถ€๋ถ„์€ ์™„์ „ํ•œ ui ์˜์—ญ์ด๊ธฐ์— ๊ทธ๋ƒฅ ๋‚ด๊ฐ€ ..

๐Ÿ–ฅ๏ธ react 2024. 1. 17. 15:11
[react] useEffect()

state props . . ํŠน์ • ์ฝ”๋“œ๋“ค์ด ์ฒซ ๋ฒˆ์งธ component render์—์„œ๋งŒ ์‹คํ–‰๋˜๊ฒŒ ํ•˜์ž. ์ฒ˜์Œ ํ•œ ๋ฒˆ๋งŒ..!! ๋‚˜์ค‘์—๋Š” ์ƒํƒœ๊ฐ€ ๋ณ€ํ•ด๋„ ์‹คํ–‰๋˜์ง€ ์•Š๋„๋ก. ์šฐ๋ฆฌ๊ฐ€ state๋ฅผ ๋ณ€๊ฒฝํ•  ๋•Œ ๋ชจ๋“  code๊ฐ€ ๋‹ค์‹œ ์‹คํ–‰๋œ๋‹ค. ํ•˜์ง€๋งŒ ๊ทธ๋Ÿด ํ•„์š”๊ฐ€ ์—†์„ ๊ฒฝ์šฐ!! ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ• ๊นŒ? useEffect๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. ์ด useEffect๋Š” ๋‘ ๊ฐœ์˜ argument๋ฅผ ๊ฐ€์ง€๋Š”๋ฐ, ์ฒซ ๋ฒˆ์งธ๋Š” ์šฐ๋ฆฌ๊ฐ€ ๋”ฑ ํ•œ ๋ฒˆ๋งŒ ์‹คํ–‰ํ•˜๊ณ  ์‹ถ์€ ์ฝ”๋“œ์ด๋‹ค. ex) useEffect(function1, []) ๋‘๋ฒˆ์งธ๋Š” ... ๋งˆ๋ฒ•๊ฐ™๋‹ค....? ๊ฒฐ๊ตญ, useEffect์— ๋Œ€ํ•ด ๋ฐฐ์› ๋‹ค. ์ด ํ•จ์ˆ˜๋Š” ๊ณ„์† ์‹คํ–‰๋˜์ง€ ์•Š๋„๋ก ํ•˜๋Š” ๊ฒƒ. ํ•œ ๋ฒˆ๋งŒ ์‹คํ–‰ํ•ด๋„ ๋˜๋Š” ๊ฒƒ๋“ค์„ ๋‹ค๋ฃจ๋Š” ํ•จ์ˆ˜์ด๋‹ค. ๋‘ ๋ฒˆ์งธ argument๋Š”.. ์ด๋Ÿด ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. ํŠน์ •ํ•œ ๋ถ€๋ถ„์ด ๋ณ€..

๐Ÿ–ฅ๏ธ react 2022. 12. 27. 18:21