ํ์ฌ ํ๋ก์ ํธ์์ ์ง์ fetch๋ฅผ ํตํด ํต์ ํ๋ฉด์ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๊ณ ์๋ค.
ํ์ง๋ง ์ด ๋ฐฉ์์ ๊ฒฝ์ฐ ๋ค์ ๋ฐ๋ณต๋๋ ์์ฒญ๊ณผ ์ต์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ค์ง ๋ชปํ๊ณ , ๋ฐ์์ค๋ ค๋ฉด ์ต์ ํ์ด์ง๋ก ์๋ก๊ณ ์นจ ๋๋ ๋ฑ์ ๋ฌธ์ ๋ค์ด ๋ฐ์ํ๊ณ ์๋ค.
์์ฑ๋ฒํผ์ ๋๋ฅด๋ฉด ์ต์ ์ผ๋ก ๋ฐ๋ก ๋์ง ์๋ ๋ฌธ์ ๊ฐ ์์๋ค. ๋๊ด์ ์
๋ฐ์ดํธ, useEffect๋ฅผ ์ด์ฉํ ์๋๊ฐฑ์ ์ ํด๋ณผ๊น ํ๋ค๊ฐ ์ฐจ๋ผ๋ฆฌ react-query๋ฅผ ๋์
ํด๋ณด๋ฉด ์ด๋จ๊น ๊ณ ๋ฏผํด๋ณด๊ณ ์์ต๋๋ค.
์ด๊ธ์์๋ react-query๋ฅผ ๋์ ํด๋ณด๊ธฐ ์ํด react-query๊ฐ ๋ฌด์์ธ์ง, ๋ ์ด๋ป๊ฒ ์ฌ์ฉํ๋์ง ์ ๋ฆฌํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
React-query
๋?๋ฆฌ์กํธ ์ฟผ๋ฆฌ๋ ์ ํ๋ฆฌ์ผ์ด์ ์์ ์๋ฒ ์ํ๋ฅผ ๋ถ๋ฌ์ค๊ณ , ์บ์ฑํ๋ฉฐ, ์ง์์ ์ผ๋ก ๋๊ธฐํํ๊ณ ์ ๋ฐ์ดํธ ํ๋ ์์ ์ ๋์์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋๋ค. ๋ฆฌ์กํธ ์ฟผ๋ฆฌ๋ฅผ ์ฌ์ฉํ๋ฉด ์๋ฒ ์ํ์ ํด๋ผ์ด์ธํธ ์ํ๋ฅผ ๋ถ๋ฆฌํ์ฌ ๊ด๋ฆฌํ ์ ์์ด React ์ ํ๋ฆฌ์ผ์ด์ ์ ์ฑ๋ฅ, ํ์ฅ์ฑ, ์ ์ง ๋ณด์์ฑ์ ํฅ์์ํฌ ์ ์์ต๋๋ค. ๋๋ถ์ด ์๋ฒ ์ํ๋ฅผ ๊ด๋ฆฌํ๋ฉฐ ๋ง์ฃผํ๋ ๋ค์ํ ๋ฌธ์ ๋ค์ ํจ๊ณผ์ ์ผ๋ก ํด๊ฒฐํ ์ ์์ต๋๋ค.
์ฅ์ ์ ๋ฐ์ดํฐ ์บ์ฑ ๋ฐ ์ต์ ํ, ์๋ ์ฌ์์ฒญ ๋ฐ ์ค์๊ฐ ์ ๋ฐ์ดํธ, ์๋ฌ ์ฒ๋ฆฌ ๋ฐ ์ฌ์๋, ์ค๋ณต ์์ฒญ ๋ฐฉ์ง, ํ์ฅ์ฑ๊ณผ ์ ์ฐ์ฑ ๋ฑ์ด ์๊ฒ ์ต๋๋ค.
์์ธํ ๊ฒ๋ค์ ๊ณต์ ํ์ด์ง์์ ํ์ธํด์ฃผ์๊ธฐ ๋ฐ๋๋๋ฅ@!
layout.js