์ํํธ์จ์ด๊ฐ ๊ฐ์ง ๋ณต์ก๋๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํ ๋๊ณ ๊น์ ์ ์กฐ๋ค์ ์งํ๋ฅผ ์ตํ๊ณ ์ค์ ๋ก ์ค๋ฌด์์ ์ด๋ฅผ ์์ ์์ฌ๋ก ์๊ฐํ๊ณ , ์ฐธ๊ณ ํ๊ณ ํ์ฉํ ์ ์์ผ๋ฉด ์ง๊ธ๋ณด๋ค ๋ ํ๋ฅญํ ๊ฐ๋ฐ์๋ก ์ฑ์ฅํ ์ ์๊ฒ ๋ค๋ ์๊ฐ์ ๋์์ธ ํจํด์ ๋ํ ๊ณต๋ถ๋ฅผ ์์ํฉ๋๋ค.
ํ๋ฐํธ์๋ ๊ฐ๋ฐ์๋ก์ React์ Redux๊ฐ์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ ์ฒ ํ์ด ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์ ๊ธฐ๋ฐํ๊ณ ์๋ค๊ณ ์๊ฐํ๊ธฐ ๋๋ฌธ์, ์ค๋ฌด์ OOP๋ฅผ ์ ์ฉํด๋ณด๊ธฐ๋ ์ฝ์ง ์์ต๋๋ค. ํ์ง๋ง ๋์์ธํจํด์ ํ์ตํ๋ ๊ฒ์ ์ด๋ป๊ฒ ํด์ผ ๋ณ๊ฒฝ์ ์ ์ฐํ ์ฝ๋๋ฅผ ์์ฑํ ์ ์๊ณ ๊ฑฐ์์ ์ผ๋ก ๋ดค์๋ ์ํธํ์จ์ด ์ํคํ ์ฒ๋ฅผ ์ด๋ป๊ฒ ๊ตฌ์ฑํ ์ ์์์ง์ ๋ํ ํํธ๋ฅผ ์ค ๊ฒ์ด๋ผ ๊ธฐ๋ํฉ๋๋ค. ๋ํ, ํจ์ํ ํ๋ก๊ทธ๋๋ฐ๊ณผ ๋ณ๋ ฌ์ ์ผ๋ก ํ์ตํ๊ธฐ ๋๋ฌธ์ ๋์ ์ฐจ์ด์ ์ ๋น๊ตํ๋ ๊ฒ๋ ์๋นํ ์๊ฐ์ ์ค ๊ฒ์ด๋ผ ์๊ฐํฉ๋๋ค.
ํค๋ํผ์คํธ ๋์์ธํจํด์ ์ฐธ๊ณ ํฉ๋๋ค.
- ๋ณ๊ฒฝ์๋ ๋ซํ์๊ณ ํ์ฅ์๋ ์ด๋ ค์์ด์ผ ํ๋ค๋ OCP ๋ฒ์น์ด ํต์ฌ์ด์๋ ํจํด์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค. ๊ตฌ์ฒด ํด๋์ค์์ composition์ด ์๋ ์ธํฐํ์ด์ค์์ composition์ ํตํด ๋ฐํ์์ ์ด๋ค ๊ฐ์ฒด์ ํ๋ ฅ์ ํ ๊ฒ์ธ์ง ๊ฒฐ์ ์ ํด์ค์ผ ํฉ๋๋ค.
-
observable์ด observer๋ก ๋ฐ์ดํฐ๋ฅผ ์ง์ ๋ณด๋ด๋(push), observer๊ฐ observable์ ๋ฐ์ดํฐ๋ฅผ ์ง์ ๊ฐ์ ธ์ค๋(pull) ๋๊ฐ์ง ๋ฐฉ์์ด ์์ต๋๋ค. ์ผ๋ฐ์ ์ผ๋ก pull ๋ฐฉ์์ด ๋ ์ฌ๋ฐ๋ฅธ ๋ฐฉ๋ฒ์ด๋ผ๊ณ ํ๋๋ฐ, push๋ฐฉ์์ ๊ฒฝ์ฐ๋ observable์ด ๋ณ๊ฒฝ๋๋ ๋ฐ์ดํฐ๋ฅผ ์ง์ observer์๊ฒ ๋ณด๋ด์ผํ๋ ๋จ์ ์ด ์๊ธฐ ๋๋ฌธ์ ๋๋ค. pull๋ฐฉ์์ ๊ฒฝ์ฐ๋ observable ๊ฐ์ฒด๊ฐ observer์๊ฒ ๋ฉ์ธ์ง๋ฅผ ๋ณด๋ด๋ฉด observer ๊ฐ์ฒด๋ค์ ์์์ ํ์ํ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๊ฒ ๋ง๋ค ์ ์์ต๋๋ค.
-
observer ํจํด์์ observer๊ฐ ๋ณ๊ฒฝ๋ ๋ observerable์ ๊ฑด๋ค์ง ์๊ณ ์ฝ๋๋ฅผ ๋ณ๊ฒฝํ ์ ์๋ค๋ ์ฅ์ ์ด ์์ต๋๋ค. observable์ ์ํ๋ ๊ทธ๋๋ก ๋๋ฌ๋ ๋๋ค๋ ์๋ฏธ์ด์ฃ .
- ์์์ผ๋ก ํ์ฅ์ ํ ๊ฒฝ์ฐ ์ปดํ์ผ ํ์์ ์์กด์ฑ์ด ๊ฒฐ์ ๋๊ธฐ ๋๋ฌธ์, ํด๋์ค๊ฐ ํญ๋ฐํ๋ ๋ฌธ์ ๊ฐ ์๋ค.
- ๋ฐ์ฝ๋ ์ดํฐ ํจํด์ ์์์ ์ฌ์ฉํ ๊ฒฝ์ฐ์ ๋ฐ์ํ๋ ๋ฌธ์ ๋ฅผ ์ ํด๊ฒฐํด์ค๋ค. ํนํ OCP(open close principle) ์์น์ ์งํค๋ฉด์ ํ์ฅ์ฑ๋ ๊ฐ์ ธ๊ฐ ์ ์๋ค.
- ๋ฐ์ฝ๋ ์ดํฐ ๊ฐ์ฒด๋ ํด๋ผ์ด์ธํธ์ ์ ์ฅ์์ ๊ฐ์ธ๋ ๊ฐ์ฒด์ ๊ฐ์ ํ๋์ ํด์ผํ๊ธฐ ๋๋ฌธ์ ๊ฐ์ฒด๊ฐ ๊ตฌํํ๊ณ ์๋ ์ธํฐํ์ด์ค๋ฅผ ๊ตฌํํด์ผ๋ง ํ๋ค.
- ๋๋ฌด ๋ง์ ์์ ๋ฐ์ฝ๋ ์ดํฐ ๊ฐ์ฒด๋ฅผ ๋ง๋ค์ด์ผ ํ๋ ๋จ์ ์ด ์๋ค.
- ์ดํ๋ฆฌ์ผ์ด์ ์ ์ญ์์ ๋จ 1๊ฐ์ ์ธ์คํด์ค๋ฅผ ์์ฑํ๋ ํจํด์ด๋ค.
- ์ด๋ ๊ณณ์์๋ ์ ๊ทผํ ์ ์๊ณ , ์ ์ญ ๋ณ์์๋ ๋ค๋ฅด๊ฒ ์ธ์คํด์ค๋ฅผ lazy loadingํ ์ ์๋ค.
- ์์กด์ฑ์ด ์ปค์ ๋ณ๊ฒฝ์ ์ด ์ดํ๋ฆฌ์ผ์ด์ ์ ์ญ์ผ๋ก ํผ์ง ์ ์๋ค. ์ฑ๊ธํด์ ๊ณ ์ง์ ์ธ ๋ฌธ์ ๋ค.
- ๋ฉํฐ์ค๋ ๋ฉ ํ๊ฒฝ์์ ์ธ์คํด์ค๋ฅผ ์์ฑํ๋ ๋ฉ์๋๋ฅผ synchonizationํด์ค์ผ ํ๋ค. ๊ทธ๋ ์ง ์์ผ๋ฉด ์ฌ๋ฌ ์ธ์คํด์ค๊ฐ ์์ฑ๋๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ ์ ์๋ค.
- ์ค์ ๋ก ์ฑ๊ธํด์ ์ง์ ๊ตฌํํด์ ์ฌ์ฉํ ์ผ์ ๋ง์ง๋ ์์ ๊ฒ์ด๋ค.
- ํ๋ฐํธ์๋ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ค์ ์๊ฐํด๋ณด๋ฉด(Redux, Recoil) ๋ด๋ถ์ ์ผ๋ก ์ฑ๊ธํด์ ์ฌ์ฉํ๊ณ ์์ ๊ฒ์ด๋ผ ์๊ฐํ๋ค. ๋ฟ๋ง ์๋๋ผ React Query์์ cahce, Context API๋ ์๋ค. ์๋นํ ์ฌ๋ฌ ๊ณณ์์ ์ฌ์ฉ๋๋ ๊ฒ์ ๋ดค์๋ ์ฝ๊ฒ ์ ๊ทผํ ์ ์๋ ์ค๊ณ ๋ฐฉ๋ฒ์ธ ๊ฒ ๊ฐ๋ค. ํ์ง๋ง ์์ ์ธ๊ธํ๋ ๋ฐ์ ๊ฐ์ด ์์กด์ฑ์ด ๋งค์ฐ ํฌ๊ธฐ ๋๋ฌธ์ ์กฐ์ฌํด์ ๋ค๋ค์ผํ ํ์๊ฐ ์๋ค.
- array ํน์ linked list ์ฒ๋ผ ๋ฐ๋ณต๋๋ ๊ตฌ์กฐ์์ ๊ตฌํ์ ํด๋ผ์ด์ธํธ์ ๋ ธ์ถ์ํค์ง ์๊ณ ๋์ผํ ์ธํฐํ์ด์ค๋ฅผ ์ฌ์ฉํ ์ ์๊ฒ๋ ํ๋ ํจํด์ด๋ค. Javascript์์๋ [symbol.iterator] ํ์ฉ์ ์๋ก ๋ค ์ ์์ ๊ฒ ๊ฐ๋ค. Map, Set, Array, generator๊ฐ ์ด๋ฅผ ์ฌ์ฉํ๋ ์์์ด๋ค.
- single object์ group of object๋ฅผ ๋์ผํ๊ฒ ์ทจ๊ธํ๋ ํจํด์ด๋ค. ์๋ง ํด๋ ๊ตฌ์กฐ๊ฐ์ ๊ฒ๋ค์ ์ฌ์ฉํ ์ ์์ ๊ฒ ๊ฐ๋ค. ์ฌ๊ธฐ์๋ single object๋ group object๋ฅผ ๋์ผํ๊ฒ ์ธ์ํ๋ ์ถ์ํ๊ฐ ์ค์ํ๋ค๊ณ ์๊ฐํ๋ค.
- ์ ๋ต ํจํด๊ณผ ๋งค์ฐ ์ ์ฌํ๋ ํ์ฌ ์ด๋ค ์ํ ๊ฐ์ฒด๋ฅผ ์ฌ์ฉํ ์ง๋ฅผ ์ํ ๊ฐ์ฒด๊ฐ ๊ฒฐ์ ํ๋ค.
- ๊ฒฐ๊ตญ์ ์กฐ๊ฑด๋ฌธ์ด ์๋๋ผ ๋ช ์์ ์ผ๋ก ๊ฐ์ฒด๋ฅผ ๋ง๋ค์ด์ ๋ณต์ก๋๋ฅผ ์ค์ด๋ ๋ฐฉ๋ฒ์ธ๋ฐ, ์ด๋ฅผ ์ปดํฌ๋ํธ์๋ ์ ์ฉํ์๋ฉด ๊ฐ์ ์กฐ๊ฑด๋ฌธ์ผ๋ก ์ฒ๋ฆฌํ๋ ๊ฒ์ด ์๋๋ผ ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ผ๋ก ์ด๋ค ์ํ์ ๋ํ ๋ช ์์ ์ธ UI๋ฅผ ๊ทธ๋ฆด ์ ์์ ๊ฒ์ด๋ค.