์๋ ์ ๋ง๋ค์ด๋๊ณ ์ ํผ์๋ ์์ฐ๊ณ ์๋ React ํผ ๋ผ์ด๋ธ๋ฌ๋ฆฌ react-form-mozard๋ฅผ ์๊ฐํฉ๋๋ค.
ํผ ์ค์์ Stepper ๋๋ Wizard๋ผ๊ณ ํ๋, ์ฌ๋ฌ ๊ฐ์ ํผ์ ์์ฐจ์ ์ผ๋ก ํฉ์น ํํ๋ฅผ ๋ค๋ฃฐ๋ ์๋๋ค. ๊ทธ๋์ ํ๋์ ํผ์ ๋ํด์๋ react-hook-form ๋ฑ ์ ์ฐ๊ณ , ๊ทธ๊ฑธ ์ฌ๋ฌ๊ฐ ์กฐํฉํ ๋ react-form-mozard๋ฅผ ํ์ฉํ๋ฉด ๋ฉ๋๋ค.
์์ฐจ์ ์ผ๋ก ํฉ์น ์์ ๋๋์ด ์ค์ง์? ๋ชจ๋๋๊ฐ... ๊ทธ๋๋ฅผ ๋ถ๋ฆ
๋๋ค...
ํผ ๋ง๊ณ CLI๋ฅผ ๋ง๋ค๋๋ฅผ ์ ๊น ์๊ฐํด๋ณด์ฃ .
const name = prompt("์ด๋ฆ์ด?")
const age = prompt(`{name} ๋, ๋์ด๊ฐ?`)
if (Number(age) < 20) {
console.info("๋ฏธ์ฑ๋
์๋ ์ด์ฉํ ์ ์์ต๋๋ค")
return
}
const gender = prompt(`{name} ๋, ์ฑ๋ณ์ด?`)
๋ญ ์ด๋ฐ ํ๋ฆ์ ์๊ฐํด๋ณผ ์ ์๋๋ฐ์. ๋ณด์๋ฉด ๋จผ์ ๋ฐ์ ์
๋ ฅ๊ฐ์ ๋ฐ๋ผ ์ดํ์ ๋ฉ์์ง๋, ์ ์ด ํ๋ฆ์ด ๋ฌ๋ผ์ง ์ ์์ต๋๋ค. ์ฆ, ๋ชจ๋๋ํ์ฃ . ๊ทผ๋ฐ ์ด๋ฐ ํ๋ฒํ ๋ก์ง์ Stepper/Wizard ์์ ์ง๊ฒ๋๋ฉด ์ฝ๋๊ฒ ์ฝ๊ฒ ๋๋ฌ์ ์ง๋๊ฑธ ์์ ์์ต๋๋ค.
react-form-mozard์ step์ ์ ์์ ์ prompt์ ๊ฐ์ ์ญํ ์ ํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ๊ทธ๊ฑธ Generator ์์ ์น์ผ๋ฉด ๋ชจ๋๋ํ ํผ ํฉ์ฑ์ด ๊ฐ๋ฅํด์ง๋๋ค.
๋จ์ ์ด๋ผ๋ฉด... ์ง๊ธ์ React๋ ๊ฐ๊ฒฐํฉ ๋์ด ์์ด, XState ๋ฑ ๋ค๋ฅธ ์ํ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ฐ์ด ์ด๋ค๋ฉด ์ฐ๋์ด ๊น๋ํ์ง ์์์ ์์ต๋๋ค. ๊ทผ๋ฐ ํ์์ ์ฝ๊ฒ ๊ฒช์ ๋ฌธ์ ๋ ์๋๋ผ๊ณ ๋ณด๊ณ , ๋ ์ถํ์ ์ค๊ณ๋ฅผ ์์ ํด์ ๊ฐ์ ์ด ๊ฐ๋ฅํ ๋ถ๋ถ์
๋๋ค.