210727 ๊ฐœ๋ฐœ ๊ธฐ๋ก

2021. 7. 27. 19:01ใ†๐Ÿ“” TIL

21.07.27 ์˜ ๊ฐœ๋ฐœ ๊ธฐ๋ก

๐Ÿ“—  ๊ธฐํš ์š”๊ตฌ์•ˆ 

ํ˜„์žฌ ํƒญ์˜ ์ƒํƒœ๊ฐ€ '๋ฏธ์ „์†ก' ์ผ ๋•Œ, '์ˆ˜ํƒ๊ธฐ๊ด€'์ด ๊ณต๋ฐฑ์ด๋ฉด, ์˜ค๋ฅธ์ชฝ์˜ ์ „์†ก ๋ฒ„ํŠผ์ด ๋น„ํ™œ์„ฑํ™” ๋ผ์•ผ ํ•œ๋‹ค.

tab์˜ ์ƒํƒœ๋ฅผ state ๋กœ ๋„˜๊ฒจ, ๋ฏธ์ „์†ก์ผ ๋• '์ „์†ก'๋ฒ„ํŠผ์˜ disabled ํ”„๋กœํผํ‹ฐ๋ฅผ true ๋กœ ์„ค์ •ํ–ˆ๋‹ค.

์‰ฝ๊ฒŒ ๋ฐ˜์˜ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ด์—ˆ์ง€๋งŒ, ๊ณง ๋ฐ”๋กœ ๋‹จํŽธ์ ์ธ ์„ค๊ณ„ ์ž„์„ ๊นจ๋‹ฌ์•˜๋‹ค.

 

โ—๏ธโ—๏ธ  ๋ฌธ์ œ์ 

๋ฏธ์ „์†ก ํƒญ์—์„œ ์ˆ˜ํƒ๊ธฐ๊ด€์„ ์„ค์ •ํ•˜๋ฉด, ์ „์†ก ๋ฒ„ํŠผ์ด ํ™œ์„ฑํ™” ๋จ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ฌธ์ œ๋Š” ์ „์†ก/ํšŒ์‹  ํƒญ์„ ํด๋ฆญ ํ›„ ๋‹ค์‹œ ๋ฏธ์ „์†ก ํƒญ์„ ๋ˆ„๋ฅด๋ฉด, ์ˆ˜ํƒ๊ธฐ๊ด€์ด ์ดˆ๊ธฐํ™” ๋œ๋‹ค.

์ˆ˜ํƒ๊ธฐ๊ด€์ด ์ดˆ๊ธฐํ™” ๋œ ์ƒํƒœ(๊ณต๋ฐฑ ์ƒํƒœ) ์ผ ๋• ์ „์†ก ๋ฒ„ํŠผ์ด ๋น„ํ™œ์„ฑํ™” ๋ผ์•ผ ํ•˜์ง€๋งŒ,

์•„๋ž˜ ์ด๋ฏธ์ง€ ์ฒ˜๋Ÿผ ์—ฌ์ „ํžˆ ํ™œ์„ฑ์ƒํƒœ์˜ ์ „์†ก ๋ฒ„ํŠผ์„ ๋ณผ ์ˆ˜ ์žˆ์—ˆ๋‹ค. 

 

โœ…  ๋Š๋‚€์ ๊ณผ ํ•ด๊ฒฐ์•ˆ 

๋ฏธ์ „์†ก ํƒญ์ผ ๋•Œ ์ „์†ก๋ฒ„ํŠผ์„ disabled ์‹œํ‚ค๋Š” ๊ฒƒ์€ 1์ฐจ์›์  ์‚ฌ๊ณ ๋ผ ๋Š๊ผˆ๋‹ค. ๋ˆ„๊ตฌ๋‚˜ ๊ทธ ์ •๋„ ๊ธฐ๋Šฅ์€ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋‹ค. 

Tab๊ณผ ์ˆ˜ํƒ๊ธฐ๊ด€์˜ ์ƒํƒœ๊ฐ’์ด ๋ณ€๊ฒฝ๋œ ํ›„,  ๋‹ค์‹œ ๋ฏธ์ „์†ก ํƒญ์„ ํด๋ฆญํ•ด๋„,

'์ „์†ก' ๋ฒ„ํŠผ์˜ disabled ํ”„๋กœํผํ‹ฐ๊ฐ€ true ๋กœ ์œ ์ง€๋˜์–ด์•ผ ํ•œ๋‹ค.

 

๋‹จํŽธ์ ์ธ ๊ธฐ๋Šฅ ๊ฐœ๋ฐœ์„ ๋„˜์–ด, ๋‹ค์–‘ํ•œ ์ƒํ™ฉ์—์„œ๋„ ์ฒ˜์Œ ๊ธฐํšํ•œ ๋ฐ”๋ฅผ ์ง€ํ‚ฌ ์ˆ˜ ์žˆ๋Š”์ง€ ๊ผผ๊ผผํžˆ ์„ค๊ณ„ํ•  ์ˆ˜ ์žˆ์–ด์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋‹ค. ๋‹ค์–‘ํ•œ ๊ฒฝํ—˜ ์†์—์„œ ์ด๋Ÿฐ ํ˜„์‹ค์  ๊ฒฝํ—˜์น˜๊ฐ€ ๋Š˜์–ด๊ฐˆ ๊ฒƒ์ด๋ผ ๋ฏฟ๋Š”๋‹ค.

 

ํ•ด๊ฒฐ์•ˆ์€ tab๊ณผ ์ˆ˜ํƒ๊ธฐ๊ด€์˜ ์ƒํƒœ๊ฐ’์„ useEffect() ์˜ deps ๋กœ ๋„ฃ์€ ํ›„, ๋ Œ๋”๋ง ๋  ๋•Œ๋งˆ๋‹ค ํ•ด๋‹น ๊ฐ’์„ ํ•„ํ„ฐ๋ง ํ•˜์—ฌ ์ „์†ก ๋ฒ„ํŠผ์˜ disabled ํ”„๋กœํผํ‹ฐ๋ฅผ ์ œ์–ดํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค.