TIL 41: [React] ์ƒํƒœ ๊ด€๋ฆฌ

์˜ค๋Š˜์€ ๊ธฐ์ดˆ์ ์ธ ๋ฆฌ์•กํŠธ์—์„œ์˜ ์ƒํƒœ๊ด€๋ฆฌ์— ๋Œ€ํ•ด์„œ ๋ฐฐ์› ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์žฅ๋ฐ”๊ตฌ๋‹ˆ ๋‹ด๊ธฐ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด๋ณด์•˜์Šต๋‹ˆ๋‹ค.

 

 

Side Effect

Side Effect๋ฅผ ์ตœ๋Œ€ํ•œ ๋ฐฐ์ œํ•˜๊ณ  ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์—ฌ๊ธฐ์„œ Side Effect๋กœ๋Š” ๋„คํŠธ์›Œํฌ ์š”์ฒญ์ด ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ ์ž…๋ ฅ์ด ์„ค์‚ฌ fake ๋ฐ์ดํ„ฐ๋ผ๋„ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ์–ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด๋Ÿฌํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ presentation ์ปดํฌ๋„ŒํŠธ๋ผ๊ณ  ๋ถ€๋ฆ…๋‹ˆ๋‹ค. 

ํ•˜์ง€๋งŒ ๋ถˆ๊ฐ€ํ”ผํ•˜๊ฒŒ Side Effect๊ฐ€ ์ƒ๊ธธ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๊ฒฝ์šฐ๊นŒ์ง€ UI๋ฅผ ๋งŒ๋“ค ๋•Œ ๊ณ ๋ คํ•ด์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค.

 

 

Single Source of Truth

์„œ๋กœ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋™์ผํ•œ ์ƒํƒœ๋ฅผ ๋‹ค๋ฃฌ๋‹ค๋ฉด, ์ด ์ถœ์ฒ˜๋Š” ์˜ค์ง ํ•œ ๊ณณ์ด์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. 

๋ฐ์ดํ„ฐ ๋ฌด๊ฒฐ์„ฑ์ด๋ž€ ๋ฐ์ดํ„ฐ์˜ ์ •ํ™•์„ฑ์„ ๋ณด์žฅํ•˜๊ธฐ ์œ„ํ•ด ๋ฐ์ดํ„ฐ์˜ ๋ณ€๊ฒฝ์ด๋‚˜ ์ˆ˜์ • ์‹œ ์ œํ•œ์„ ๋‘์–ด ์•ˆ์ •์„ฑ์„ ์ €ํ•ดํ•˜๋Š” ์š”์†Œ๋ฅผ ๋ง‰๊ณ  ๋ฐ์ดํ„ฐ๋ฅผ ํ•ญ์ƒ ์˜ณ๊ฒŒ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์„ ๋งํ•ฉ๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ๋ฌด๊ฒฐ์„ฑ์„ ์œ„ํ•ด ๋™์ผํ•œ ๋ฐ์ดํ„ฐ๋Š” ํ•ญ์ƒ ๊ฐ™์€ ๊ณณ์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์˜ค๋„๋ก ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์ „์—ญ ์ƒํƒœ๋ฅผ ์ž˜ ๊ด€๋ฆฌํ•ด์ค˜์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์ด์™€ ๊ด€๋ จํ•ด์„œ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์žˆ๋Š”๋ฐ์š”. React Context, Redux, MobX ๋“ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ „์—ญ ์ƒํƒœ๋ฅผ ์œ„ํ•œ ์ €์žฅ์†Œ๋ฅผ ์ œ๊ณตํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๊ด€๋ฆฌ๊ฐ€ ์ˆ˜์›”ํ•˜๋ฉฐ, Props Drilling ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Props Drilling ๋ฌธ์ œ๋ž€ ๋ถ€๋ชจ์™€ ๋ฐ”๋กœ ๋ฐ‘์˜ ์ž์‹ ๊ฐ„์ด ์•„๋‹Œ ๋ถ€๋ชจ์™€ ๊ทธ ๋ฐ‘์— ์กด์žฌํ•˜๋Š” ์ž์‹๊ฐ„์˜ ์‚ฌ์ด์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌํ•ด์ฃผ๊ธฐ ์œ„ํ•ด props๋ฅผ ๋งŒ๋“ค์–ด ์‚ฌ์ด์— ์กด์žฌํ•˜๋Š” ์ž์‹ ์š”์†Œ๋“ค์„ ๋ชจ๋‘ ์ง€๋‚˜์•ผ ํ•˜๋Š” ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋ฌธ์ œ๋Š” ์ „์—ญ ์ƒํƒœ๋กœ ์„ค์ •ํ•ด์คŒ์œผ๋กœ์จ ์ง•๊ฒ€๋‹ค๋ฆฌ ํ•˜๋‚˜ํ•˜๋‚˜์”ฉ ๊ฑด๋„ ํ•„์š” ์—†์ด ํ•œ๋ฒˆ์— ๊ฐ€๋ฉด์„œ ํ•ด๊ฒฐ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๊ผญ ์žˆ์–ด์•ผํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ์ง€๋งŒ ์žˆ์œผ๋ฉด ์ข€ ๋” ๊ด€๋ฆฌ๊ฐ€ ์ˆ˜์›”ํ•ด์ง‘๋‹ˆ๋‹ค.