๐ช ํจํด ๋งค์นญ ๊ธฐ๋ฒ์ผ๋ก ์์ ํ ์กฐ๊ฑด๋ฌธ ์์ฑ์ ๋๋ ts-pattern
- ํจํด ๋งค์นญ์ ์ฌ์ฉํด ๋ณต์กํ ์กฐ๊ฑด์ ํ๋์ ๊ฐ๊ฒฐํ ํํ์ผ๋ก ํํํ ์ ์์ต๋๋ค. --- ์ผ๋ฐ์ ์ธ ๋ช ๋ นํ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์์๋ if, else, switch ๋ฑ์ ํค์๋๋ฅผ ์ฌ์ฉํด์ ์กฐ๊ฑด๋ฌธ์ ๊ตฌํํฉ๋๋ค. ํ์ง๋ง ๊ฐ์ฒด์ ์์ฑ์ด๋ ๋ฐฐ์ด์ ์์๋ฅผ ์ฒดํฌํด์ผ ํ๋ ๋ก์ง์ด ๊น์ด์ง๊ฑฐ๋, ๋น์ฆ๋์ค ๋ก์ง์ด ์ด๋ ค์ ์ง์๋ก ์ฝ๋๊ฐ ์ฅํฉํด์ง๋๋ค. ์ด๋ ๊ฐ๋ ์ฑ์ ํด์น๊ณ ์ ์ง๋ณด์๋ฅผ ์ด๋ ต๊ฒ ๋ง๋๋ ์์๊ฐ ๋ฉ๋๋ค. ์ด๋ฌํ ๋จ์ ์ ๊ทน๋ณตํ๊ธฐ ์ํด ์ ์๋ ts-pattern์ TypeScript๋ฅผ ํ์ฉํ ํจํด ๋งค์นญ(pattern match) ๊ธฐ๋ฒ์ผ๋ก ์กฐ๊ฑด๋ฌธ ์์ฑ์ ๋์์ค๋๋ค. ํจํด ๋งค์นญ์ด๋ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด์์ ์์ ํ๊ณ ์งง์ ์ฝ๋๋ก ์กฐ๊ฑด ๋ถ๊ธฐ๋ฅผ ๊ฐ๋ฅํ๊ฒ ํด์ฃผ๋ ๊ธฐ๋ฒ์ ๋๋ค. ๊ฐ๋จํ๊ฒ ์ฌ์ฉ๋ฒ์ ์ค๋ช ํด๋ณด์๋ฉด, ์ฐ์ match ๋ฉ์๋๋ฅผ ํตํด ํ๊ฐํ ๊ฐ์ ๋๊น๋๋ค. ๊ทธ๋ฌ๋ฉด ๋ฉ์๋ ์ฒด์ด๋์ ํตํด with, when, exhaustive ๋ฑ์ ํจ์๋ฅผ ๋ง๋ถ์ผ ์ ์๊ฒ ๋ฉ๋๋ค. with๋ ๋ ๊ฐ์ ์ธ์๋ฅผ ๋ฐ๋๋ฐ, ์ฒซ ๋ฒ์งธ ์ธ์๊ฐ ๋งค์นญํ ํจํด, ๋ ๋ฒ์งธ ์ธ์๊ฐ ์ฝ๋ฐฑ์ ๋๋ค. ํ๊ฐํ ๊ฐ์ด ํจํด์ ๋ถ๋ถ ์งํฉ์ ๋ง์กฑ์ํจ๋ค๋ฉด ์ฝ๋ฐฑ์ด ์คํ๋๋ ๊ตฌ์กฐ์ ๋๋ค. ์ค๋ช ์ด ๊ธฐ๋๊น ์ฝ๋๋ก ๋ณด์๋ ๊ฒ ๋ซ๊ฒ ๋ค์. const html = match(result) .with({ type: 'error' }, () => Oups! An error occured) .with({ type: 'ok', data: { type: 'text' } }, (res) => {res.data.content}) .with({ type: 'ok', data: { type: 'img', src: P.select() } }, (src) => ) .exhaustive(); ์ ์์ ์ธ์๋ ๋ ๋ณต์กํ ํจํด์ ๋ํ ๋์๋ ๊ฐ๋ฅํ๊ณ , TypeScript ์ฝ๋์ด๋ค ๋ณด๋ TSX ๋ด์์๋ ํ์ฉ์ด ๊ฐ๋ฅํฉ๋๋ค. ์ ๊ฐ ์ผํ๊ณ ์๋ ํ์์๋ ํด๋น ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ ๊ทน์ ์ผ๋ก ์ฌ์ฉํ๋ฉด์ ์ข ๋ ๊ฐ๋ ์ฑ ์ข์ ์กฐ๊ฑด๋ฌธ์ ์์ฑํ๋ ค๊ณ ๋ ธ๋ ฅ ์ค์ ๋๋ค. ํน์๋ผ๋ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์์์ ์ฐ์ํ ์กฐ๊ฑด๋ฌธ ๋ถ๊ธฐ์ ๋ํ ๋ฐฉ๋ฒ์ ๊ณ ๋ฏผ ์ค์ด์ ๋ถ์ด๋ผ๋ฉด, ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋์ ์ ํ ๋ฒ ๊ณ ๋ คํด๋ณด์ธ์. https://github.com/gvergnaud/ts-pattern