์์ฆ MERN์คํ์ผ๋ก ๋ก๊ทธ์ธ ๋ฐ ํ์๊ฐ์ ๊ธฐ๋ฅ ๊ธฐ๋ฐ์ ๋ณด์ผ๋ฌ ํ๋ ์ดํธ๋ฅผ ๋ง๋ค์ด๋ณด๊ณ ์๋ค.
์ฌ์ค ๋ด๊ฐ ์ธ๋ ค๊ณ ๋ง๋ค๊ณ ์๋ค :)
React, Nodejs(Express), MongoDB ๊ธฐ๋ฐ์ผ๋ก ์ ์์ค์ด๋ฉฐ, ๋ก๊ทธ์ธ ๋ฐ ํ์๊ฐ์ ์ด ๋ฉ์ธ ๊ธฐ๋ฅ์ธ ๋ณด์ผ๋ฌ ํ๋ ์ดํธ์ธ ๋งํผ bcrypt๋ฅผ ์ด์ฉํ ํจ์ค์๋ ์ํธํ ๋ฐ JWT(JsonWEBToken)์ ์ด์ฉํ ํ ํฐ ๋ฐ๊ธ ๋ฑ๋ฑ, ์์ง ๋ง์ด ์ํด์ง๋ง ์ต์ํ์ ๊ตฌ์ค์ ๊ฐ์ถ๋ ค๊ณ ๋ ธ๋ ฅ์ค์ด๋ค.
๋ก๊ทธ์ธํ์ด์ง๋ฅผ ์์
ํ๋ ๋์ค ์ฒ์๋ณด๋ ์๋ฌ๋ฅผ ๋ง๋๊ฒ ๋์๋๋ฐ, ๋ก๊ทธ์ธ ์ปดํฌ๋ํธ์์ ์ด๋ฉ์ผ, ํจ์ค์๋๋ฅผ ์
๋ ฅ ํ Submit์ ๋ ๋ฆฌ๋ฉด ๋ฐ์ํ๋ ์๋ฌ์๋ค.(Warning์ด๋ผ๊ณ ํด์ผํ๋)
๋ณด์ํ๋, Unmounted๋ ์ปดํฌ๋ํธ๋ ์ํ ์
๋ฐ์ดํธ๋ฅผ ์ํํ ์ ์๊ณ , ํด๋น ์์
์ ์ํ๋์ง๋ ์์ง๋ง
๋ฉ๋ชจ๋ฆฌ ๋์๊ฐ ๋ฐ์ํ ์ ์์ผ๋ useEffect์ cleanup function์ ์ด์ฉํด์ผ ํ๋ค๊ณ ํ๋ค.
์ฒ์์ ์ด๋์ ์ผ์ด๋๋๊ฑด์ง ๊ฐ์ด ์์กํ๋๋ฐ, ์ด๊ฒ์ ๊ฒ ํ ์คํธํด๋ณด๋
onSubmitHandler
ํจ์ ๋ถ๋ถ์์ ์ปดํฌ๋ํธ์ state๋ฅผ ๊ฑด๋๋ฆฌ๋ ๋ถ๋ถ์ด ๋ฌธ์ ์๋ค.
onSubmitHandler
ํจ์๋form
์์ submit ์ ์คํ๋๋ ํจ์์ด๋ค. ํจ์ ์คํ ํ ์ฌ์ฉ์๊ฐ ์ธํ์ ์ ๋ ฅํ ๊ฐ์ requestBody๋ผ๋ ๊ฐ์ฒด์ ๋ด๊ฒจloginUser
๋ผ๋ ์ก์ ์ ํ๊ณ dispatch๋๊ฒ ๋๋ค. (์ด ๋ถ๋ถ์ ๋ฆฌ๋์ค ๋ถ๋ถ์ด๊ธฐ์ ์์ธํ ์ค๋ช ํ์ง ์๊ฒ ๋ค.) ๊ทธ ํ response๋ก ๋ฐ์์ค๋ loginSuccess ์ฌ๋ถ์ ๋ฐ๋ผ ๋ฃจํธ ํ์ด์ง๋ก ์ด๋ํ ์ง, 'Login Fail'์ด๋ ์๋ฆผ ํ ์ธํ์ ์ด๋ฉ์ผ ํจ์ค์๋๋ฅผ ์ง์์ค๋ค.
์ ์๋ฌ๋ ๋ก๊ทธ์ธ ์ฑ๊ณต ์ ๋ฃจํธ ํ์ด์ง๋ก ์ด๋ํ๊ฒ๋๊ณ , ์ด๋ ํ ์๋ฌ๊ฐ ๋ฐ์ํ์๋ค. ์๊ฐํด๋ณด๋ ๋ฃจํธ ํ์ด์ง๋ก ์ด๋ํ ์์ ์์ ์ด๋ฏธ ๋ก๊ทธ์ธ ์ปดํฌ๋ํธ๋ Unmounted๋์์ง๋ง, setEmail(''), setPassword('')๋ฅผ ํตํด state ์ด๊ธฐํ๊ฐ ์ด๋ฃจ์ด์ง๋ค. ๋ฌผ๋ก ์๋์๋ ์ด์์๊ฒ ์ง๋ง, ๋ถํ์ํ ์์
์ด๋ ์๋ฌ ๋ฉ์ธ์ง์ค
'This is a no-op, but it indicates a memory leak in your application'์ด๋ ๋ฌธ์ฅ์ด ํฌํจ๋์ด์๋๊ฒ ๊ฐ๋ค.
์ด๋ฅผ ํด๊ฒฐํ๊ธฐ์ํด ์ฝ๋ฐฑํจ์๋ฅผ ๋ง๋ค์ด์ค๋ค ์์ฑ๋๋ฅผ ๋์ด๊ธฐ์ํด ์ถ๊ฐ์ ์ผ๋ก ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ ํตํด ์๋ฌ๋ฉ์ธ์ง๋ฅผ ํ์ํ๊ฒ๋ ํด์คฌ๋ค.
๋ก๊ทธ์ธ ์คํจ์ alert๊ฐ ์๋, ์กฐ๊ฑด๋ถ ๋ ๋๋ง์ผ๋ก ์ปดํฌ๋ํธ์ ์คํจ ๋ฉ์ธ์ง๊ฐ ๋ด๊ธด ํ ์คํธ๋ฅผ ์ฝ์ ์ํค๋๋ก ํด์ฃผ์๋ค.