React Router๊ฐ Reach ๋์ RR์ ๋ ๋ฐฐ๋ก ๋ฎ์ถ๊ธฐ๋ก ๊ฒฐ์ ํ ๊ฒ์ ๊ณ ๋ คํ๋ฉด Gatsby๊ฐ ์ง๊ธ ํตํฉ ๋ ๊น์?
https://reacttraining.com/blog/reach-react-router-future/
gatsby-config.js
: ํด๋น ์์
package.json
: ํด๋น ์์
gatsby-node.js
: ํด๋น ์์
gatsby-browser.js
: ํด๋น ์์
gatsby-ssr.js
: ํด๋น ์ฌํญ ์์
์ด์ด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค!
์ฐ๋ฆฌ์ ๊ณํ์ react-router๋ก ๋์๊ฐ๋ ๊ฒ์ด์ง๋ง ๋จผ์ ์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ๋ ํ์ฌ @reach/router
๋งํผ ์ก์ธ์ค ํ ์ ์๋์ง ํ์ธํด์ผํฉ๋๋ค. ๋ํ ๋ช ๊ฐ์ง ์ฃผ์ ๋ณ๊ฒฝ ์ฌํญ์ด์์ ์ ์์ผ๋ฏ๋ก ์ค์ ๋ก ์ฌ๊ธฐ์์ ์ถ์ ํ๊ณ ์์ต๋๋ค. https://github.com/gatsbyjs/gatsby/issues/15277 (์ด๊ฒ์ ์ฐ์ฐ ๋ฌธ์ ๊ฐ ์๋๋๋ค)
์ง๊ธ์์ด ๋ฌธ์ ๋ฅผ ๋ต๋ณ์ผ๋ก ํ์ํ๊ณ ์ข ๋ฃํ๊ณ ์์ง๋ง์ด ํ ๋ก ์ ๊ณ์ํ๋ ค๋ฉด ์ฌ๊ธฐ์์ ์๊ฒฌ์ ๋จ๊ฒจ์ฃผ์ธ์. ๋ฒ๊ทธ ๋ณด๊ณ ์ ๋ ๊ธฐ๋ฅ ์์ฒญ์ด ์๋ ์ง๋ฌธ์ด์๋ ๊ฒฝ์ฐ์๋ ์ปค๋ฎค๋ํฐ๋ก ์ด๋ ํ๋ ๊ฒ์ด ์ข์ต๋๋ค. Gatsby๋ฅผ ์ฌ์ฉํด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ด์ด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค!
์ฐ๋ฆฌ์ ๊ณํ์ react-router๋ก ๋์๊ฐ๋ ๊ฒ์ด์ง๋ง ๋จผ์ ์ฐ๋ฆฌ๊ฐ ์ฌ์ฉํ๋ ํ์ฌ
@reach/router
๋งํผ ์ก์ธ์ค ํ ์ ์๋์ง ํ์ธํด์ผํฉ๋๋ค. ๋ํ ๋ช ๊ฐ์ง ์ฃผ์ ๋ณ๊ฒฝ ์ฌํญ์ด์์ ์ ์์ผ๋ฏ๋ก ์ค์ ๋ก ์ฌ๊ธฐ์์ ์ถ์ ํ๊ณ ์์ต๋๋ค. https://github.com/gatsbyjs/gatsby/issues/15277 (์ด๊ฒ์ ์ฐ์ฐ ๋ฌธ์ ๊ฐ ์๋๋๋ค)์ง๊ธ์์ด ๋ฌธ์ ๋ฅผ ๋ต๋ณ์ผ๋ก ํ์ํ๊ณ ์ข ๋ฃํ๊ณ ์์ง๋ง์ด ํ ๋ก ์ ๊ณ์ํ๋ ค๋ฉด ์ฌ๊ธฐ์์ ์๊ฒฌ์ ๋จ๊ฒจ์ฃผ์ธ์. ๋ฒ๊ทธ ๋ณด๊ณ ์ ๋ ๊ธฐ๋ฅ ์์ฒญ์ด ์๋ ์ง๋ฌธ์ด์๋ ๊ฒฝ์ฐ์๋ ์ปค๋ฎค๋ํฐ๋ก ์ด๋ ํ๋ ๊ฒ์ด ์ข์ต๋๋ค. Gatsby๋ฅผ ์ฌ์ฉํด ์ฃผ์ ์ ๊ฐ์ฌํฉ๋๋ค.