์ ์งํ๋ค.
ํ์ ์ ๊ทธ๋ ์ด๋ ๊ณํ์ด ์์ต๋๊น? ์ด์ React๊ฐ ์ ๊ทธ๋ ์ด๋๋์์ผ๋ฏ๋ก dva์ ํด๋น ๊ฒฝ๊ณ ๊ฐ ํ์๋๊ณ dva ๋ฒ์ 2.4.1์๋ ๊ฒฝ๊ณ ๊ฐ ํ์๋ฉ๋๋ค. ์๋์ผ๋ก 2.6.0-beta.14๋ก ์ ๊ทธ๋ ์ด๋ํ๊ณ ๋ผ์ฐํ ๋ฐ ๊ธฐ๋ก ๋ฐฉ๋ฒ์ ์์ ํด์ผ๋ง ๊ฒฝ๊ณ ๋ฅผ ์ ๊ฑฐํ ์ ์์ต๋๋ค. ๋ค์ ์์ ๋ฒ์ ์ ์ธ์ ์ถ์๋๋์ง ์ฌ์ญค๋ด๋ ๋ ๊น์!
dva@3 ๊ฐ ๊ณํํ๊ณ ์๊ณ ๋๋ฃ๋ค์ด ํ์ ์กฐ์น๋ฅผ
๋ผ์ฐํ ๊ฒฝ๊ณ ๋ ๊ฐ๋ฅํ ํ ๋นจ๋ฆฌ ํด๊ฒฐ๋ฉ๋๋ค.
๊ธ์์, ๊ฐ์ฌํฉ๋๋ค. ์คํ ์์ค๋ ์ฝ์ง ์์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค!
์ ๋น์ค.
์ด์ umi๋ฅผ ์ฌ์ฉํ๊ณ ์์ผ๋ฏ๋ก dva ์ค๋ช
์๋ฅผ ์ฝ์ ํ์๊ฐ ์์ต๋๋ค.
dva ์๊ฐ์์๋ umi๋ฅผ ์ฌ์ฉํ๋ฉด 0api๋ก ์ค์ผ ์ ์๋ค๊ณ ํฉ๋๋ค.
๊ทธ๋ฆฌ๊ณ dva-cli๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ก์ ํธ๋ฅผ ์์ฑํ ๋ ๋์ create-umi๋ฅผ ์ฌ์ฉํ๋ผ๋ ๋ฉ์์ง๊ฐ ํ์๋ฉ๋๋ค.
ํ๋์ antd-admin์ ์ฌ์ฉํด ์์ง๋ง ๋ฌธ์๋ฅผ ์์ธํ ์ฝ์ง๋ ์์์ต๋๋ค. ์ต๊ทผ์ antd-pro๋ก ๋ง์ด๊ทธ๋ ์ด์ ์ ํ๊ณ ์ถ์ด์ ๊ด๋ จ ๋ฌธ์๋ฅผ ์ ํ๋ ์๊ฐ ์ ํ์ด๋ณด๊ณ ์ถ์ต๋๋ค.
๊ตฌ์ฒด์ ์ธ ๋ด์ฉ์ ํ์คํ์ง ์์ต๋๋ค. ๋ชฉํ๋ dva, API ์กฐ์ , ๋ฌธ์ ์ฌ๊ตฌ์ฑ ๋ฐ ์ฐ์ํ ๊ธฐ๋ณธ ts ์ง์์ ์ฌ์ฉ์ ๋จ์ํํ๋ ๊ฒ์ ๋๋ค. 1๋ ์ ์ ๋ฒ์ ์ด ์์ ๊ฒ์ ๋๋ค.
๋ฒ์จ 2020๋ ์ด์ผ, ์ค์ ๋ก ์ฌ๋๊ฒฐ์ ์ฌ์ฉํ ์ ์๋ค
๋จผ์ ๊ณต์ ๋ฒ์ ์ ๊ฒ์ํด ๋ณด๊ฒ ์ต๋๋ค. ๊ทธ๋ฆฌ๊ณ ๋ก๋ํธ๊ทธ~ ๐
2020๋ ์ด ์จ๋ค
@xc1427 ๋ฒ์ 2.4.1์ ์ ์งํ๋ฉด์ react-redux๋ฅผ 7.1.0์ผ๋ก ์ํํ๊ฒ ์ ๊ทธ๋ ์ด๋ํ ์ ์์ต๋๊น(useSelector๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด). ์ฆ, ํ์ฌ ์ต์ ๋ฒ์ ์ด 2.4.1๊ณผ ๋น๊ตํ์ฌ ์ด๋ค ์ฃผ์ ๋ณ๊ฒฝ ์ฌํญ์ด ์์ต๋๊น? ๋ ์์ธํ ์ ๊ทธ๋ ์ด๋ ๊ฐ์ด๋๋ฅผ ๋ณด์ง ์์๊ธฐ ๋๋ฌธ์ ๋ต๋ณ์ ๋๋ฆฌ๊ฒ ์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค.
๋ฒ์ 3.0 ์ ๊ทธ๋ ์ด๋ ์ฌ๋ถ ๋งค์ผ ํ์ธโฆ
@xc1427 ๋ฒ์ 2.4.1์ ์ ์งํ๋ฉด์ react-redux๋ฅผ 7.1.0์ผ๋ก ์ํํ๊ฒ ์ ๊ทธ๋ ์ด๋ํ ์ ์์ต๋๊น(useSelector๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด). ์ฆ, ํ์ฌ ์ต์ ๋ฒ์ ์ด 2.4.1๊ณผ ๋น๊ตํ์ฌ ์ด๋ค ์ฃผ์ ๋ณ๊ฒฝ ์ฌํญ์ด ์์ต๋๊น? ๋ ์์ธํ ์ ๊ทธ๋ ์ด๋ ๊ฐ์ด๋๋ฅผ ๋ณด์ง ์์๊ธฐ ๋๋ฌธ์ ๋ต๋ณ์ ๋๋ฆฌ๊ฒ ์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค.
๋ฐ์์ 16.12๋ก ์ ๊ทธ๋ ์ด๋ํ๊ณ ์ถ์ง๋ง ์๋ํ์ง ์์ต๋๋ค.
dva 3 ์ถ์ ๊ณํ์ด ์๋์? dva์ ant-design์ ํจ๊ป ์ ๊ทธ๋ ์ด๋ ํ ์์ ์ ๋๋ค. Ant-design์ด ์ถ์๋ ์ง ๋ ๋ฌ์ด ์ง๋ฌ๋๋ฐ dva์์ ์์์ด ์์ต๋๋ค.
์ด ํ๋ก์ ํธ๋ ์ฌ์ ํ ์ ์ง๋๊ณ ์์ต๋๊น?๊ฐ๋ฅํ ํ ๋นจ๋ฆฌ ์์ ์ ์ธ ๋ฒ์ ๊ณผ 3๊ฐ์ง ๊ณํ์ด ์ถ์๋๊ธฐ๋ฅผ ๋ฐ๋๋๋ค.
๋ฒ์จ 2020๋ ์ด์ผ, ์ค์ ๋ก ์ฌ๋๊ฒฐ์ ์ฌ์ฉํ ์ ์๋ค
์ ๋ง ์ข๋ค
์ธ์ ์ ๊ทธ๋ ์ด๋ํฉ๋๊น?
8๊ฐ์์ด ์ง๋ฌ์ต๋๋ค. 2.6.0 ๋๋ beta.20 ๋ฒ์ , ์ธ์ ์ ์ ๋ฒ์ ์ด ๋๋์? ?
์๋ฌด๋ ์ ๋ฐ์ดํธํ์ง ์์๋๋ฐ ํฌ๊ธฐํ์ จ๋์?
์๋ฌด๋ ์ ๋ฐ์ดํธํ์ง ์์๋๋ฐ ํฌ๊ธฐํ์ จ๋์?
์ ์ง.
dva@3 ์ธ์ ๋์ค๋์.. ๊ธฐ๋ค๋ ค ๊ฐ์ฌํฉ๋๋ค .
2021๋ ~
2021๋ 2์ 5์ผ ๋ด๊ฐ ์ธ์ํ ํ๋ก์ ํธ๊ฐ ์ด ์ค๋๋ ํ๋ ์์ํฌ๋ก ์์ฑ๋์ง ์์๋ค๋ฉด ์ด๋ฏธ ์ค๋์ ์ ํฌ๊ธฐํ์ ๊ฒ์ ๋๋ค. . . . ๋ฐ์ ๋ผ์ดํ ์ฌ์ดํด์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ด๋ป๊ฒ ํ๋ ์ดํ๋์?
์๋
, dva
์ด์ ์๋ฆฌ๋ฐ๋ฐ๋ ์์ผ๋ก ๊ฐ์ฅ ์ฑ์ํ ์ปค๋ฎค๋ํฐ๋ง ์ฌ์ฉํ ๊ฒ์ด๋ฉฐ ์๋ฆฌ๋ฐ๋ฐ ๋ถ์๋ ๋ ์ด์ ๊ณ ๋ คํ์ง ์์ ๊ฒ์
๋๋ค.
์๋ , dva
์ด์ ์๋ฆฌ๋ฐ๋ฐ๋ ์์ผ๋ก ๊ฐ์ฅ ์ฑ์ํ ์ปค๋ฎค๋ํฐ๋ง ์ฌ์ฉํ ๊ฒ์ด๋ฉฐ ์๋ฆฌ๋ฐ๋ฐ ๋ถ์๋ ๋ ์ด์ ๊ณ ๋ คํ์ง ์์ ๊ฒ์ ๋๋ค.
์ฌ์ฉํ ์ ์๋ค๋ ๊ฒ์ด ์๋๋ผ dva๋ ํด๋์ค ์ปดํฌ๋ํธ์๋ง ์ ํฉํฉ๋๋ค.์ด์ hooks๊ฐ ์ฌ์ฉ๋์ด dva๊ฐ ๋ ์ด์ ํ์ํ์ง ์์ต๋๋ค.
2021๋ 2์ 9์ผ
์๋ , dva
์ด์ ์๋ฆฌ๋ฐ๋ฐ๋ ์์ผ๋ก ๊ฐ์ฅ ์ฑ์ํ ์ปค๋ฎค๋ํฐ๋ง ์ฌ์ฉํ ๊ฒ์ด๋ฉฐ ์๋ฆฌ๋ฐ๋ฐ ๋ถ์๋ ๋ ์ด์ ๊ณ ๋ คํ์ง ์์ ๊ฒ์ ๋๋ค.์ฌ์ฉํ ์ ์๋ค๋ ๊ฒ์ด ์๋๋ผ dva๋ ํด๋์ค ์ปดํฌ๋ํธ์๋ง ์ ํฉํฉ๋๋ค.์ด์ hooks๊ฐ ์ฌ์ฉ๋์ด dva๊ฐ ๋ ์ด์ ํ์ํ์ง ์์ต๋๋ค.
๋น์ ์ concent๋ฅผ ์๋ ํ ์ ์์ต๋๋ค https://github.com/concentjs/concent
์๋ฒฝํ ts ์ง์, ์ต์์ Provider ์์, ๋ด์ฅ ์ข
์์ฑ ์์ง, ํด๋์ค ๊ตฌ์ฑ ์์ ๋ฐ ํจ์ ๊ตฌ์ฑ ์์์ ๋
ผ๋ฆฌ์ ์ฌ์ฌ์ฉ, ์ค์ ๊ณผ ๊ฐ์ ๊ณ ๊ธ ๊ธฐ๋ฅ์ด ์ ๊ณต๋ฉ๋๋ค. ๊ณต์ Dike ๊ณต์์ ์ดํด ๋ณผ ๊ฐ์น๊ฐ ์์ต๋๋ค.
์๋ , dva
์ด์ ์๋ฆฌ๋ฐ๋ฐ๋ ์์ผ๋ก ๊ฐ์ฅ ์ฑ์ํ ์ปค๋ฎค๋ํฐ๋ง ์ฌ์ฉํ ๊ฒ์ด๋ฉฐ ์๋ฆฌ๋ฐ๋ฐ ๋ถ์๋ ๋ ์ด์ ๊ณ ๋ คํ์ง ์์ ๊ฒ์ ๋๋ค.์ฌ์ฉํ ์ ์๋ค๋ ๊ฒ์ด ์๋๋ผ dva๋ ํด๋์ค ์ปดํฌ๋ํธ์๋ง ์ ํฉํฉ๋๋ค.์ด์ hooks๊ฐ ์ฌ์ฉ๋์ด dva๊ฐ ๋ ์ด์ ํ์ํ์ง ์์ต๋๋ค.
hooks ๋ฆฌํฉํ ๋ง ํ๋ก์ ํธ๋ ์ง๊ธ๊น์ง dva์์ ์ด์์ ๋ฐ๊ฒฌํ์ง ๋ชปํ์ผ๋ฉฐ, hooks์ ํจ๊ป ์ฌ์ฉํ ์ ์์ต๋๋ค.
ํํฌ ๋ฉ๋ชจ ๋ฐ dva ์ฐ๊ฒฐ์ ๋ฒ๊ทธ ์ฌ์ฉ
ํํฌ ๋ฉ๋ชจ ๋ฐ dva ์ฐ๊ฒฐ์ ๋ฒ๊ทธ ์ฌ์ฉ
dva๊ฐ ๋ฒ ํ ๋ฒ์ ์ผ๋ก ์ ๋ฐ์ดํธ๋๋ฉด useSelector๋ฅผ ์ง์ ์ฐ๊ฒฐํ ํ์ ์์ด ์ฌ์ฉํ ์ ์์ต๋๋ค.
dva ๋ฒ ํ๋ฒ์ ์ ์์ ์ ์ธ๊ฐ?์๋๋ฉด ํฌ๊ธฐํ๊ณ mobx๋ฅผ ์ฌ์ฉํด๋ณด์.
ํํฌ ๋ฉ๋ชจ ๋ฐ dva ์ฐ๊ฒฐ์ ๋ฒ๊ทธ ์ฌ์ฉ
dva๊ฐ ๋ฒ ํ ๋ฒ์ ์ผ๋ก ์ ๋ฐ์ดํธ๋๋ฉด useSelector๋ฅผ ์ง์ ์ฐ๊ฒฐํ ํ์ ์์ด ์ฌ์ฉํ ์ ์์ต๋๋ค.
ํ๋, ์ ๋ dva์ 2.6.0-beta.19๋ฅผ ์ฌ์ฉํ๊ณ react-redux์ 7.1 ์ด์ ๋ฒ์ ์ ์ฌ์ฉํ๋๋ฐ ์ด ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ฉด ํ์ด์ง๋ฅผ ์ง์ ์ด ์ ์์ต๋๋ค.
ํํฌ ๋ฉ๋ชจ ๋ฐ dva ์ฐ๊ฒฐ์ ๋ฒ๊ทธ ์ฌ์ฉ
dva๊ฐ ๋ฒ ํ ๋ฒ์ ์ผ๋ก ์ ๋ฐ์ดํธ๋๋ฉด useSelector๋ฅผ ์ง์ ์ฐ๊ฒฐํ ํ์ ์์ด ์ฌ์ฉํ ์ ์์ต๋๋ค.
...
ํ๋, ์ ๋ dva์ 2.6.0-beta.19๋ฅผ ์ฌ์ฉํ๊ณ react-redux์ 7.1 ์ด์ ๋ฒ์ ์ ์ฌ์ฉํ๋๋ฐ ์ด ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ฉด ํ์ด์ง๋ฅผ ์ง์ ์ด ์ ์์ต๋๋ค.
@Zhang-haohua npm ls react-redux
์ค์น๋ ๋ฒ์ ์ ๋ณด์ธ์.
ํผํธ
ํํฌ ๋ฉ๋ชจ ๋ฐ dva ์ฐ๊ฒฐ์ ๋ฒ๊ทธ ์ฌ์ฉ
์ง๊ธ๊น์ง ๋ฒ๊ทธ๊ฐ ๋ฐ๊ฒฌ๋์ง ์์์ต๋๋ค
// eslint-disable-next-line react/no-typos
UserInfoModal.proptypes = {
app: PropTypes.object,
dispatch: PropTypes.func
}
function mapStateToProps({ app }) {
return { app }
}
export default React.memo(connect(mapStateToProps)(UserInfoModal), (prevProps, nextProps) => {
if (prevProps && nextProps) {
...
}
return true;
});
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๊ตฌ์ฒด์ ์ธ ๋ด์ฉ์ ํ์คํ์ง ์์ต๋๋ค. ๋ชฉํ๋ dva, API ์กฐ์ , ๋ฌธ์ ์ฌ๊ตฌ์ฑ ๋ฐ ์ฐ์ํ ๊ธฐ๋ณธ ts ์ง์์ ์ฌ์ฉ์ ๋จ์ํํ๋ ๊ฒ์ ๋๋ค. 1๋ ์ ์ ๋ฒ์ ์ด ์์ ๊ฒ์ ๋๋ค.