์์๋๋ ๊ธฐ๋ฅ์ ํจ๊ณผ๊ฐ ๋ฐ์ดํฐ๋ฅผ ๋น๋๊ธฐ ์ ์ผ๋ก ์์ง ํ ํ ํ์ ์ฐฝ์ ์์ง ๋ ๋ฐ์ดํฐ๊ฐ ํ์๋๋ค๋ ๊ฒ์ ๋๋ค. ๊ตฌ์ฑ ์์ ํ์ ์ฌ๋ถ์ ๋ํ ๊ตฌ์ฑ ์์ ์ํ ํ๋๊ทธ ์์ฑ์ ์ค์ ํฉ๋๋ค. ํ์ด์ง๊ฐ ์ ํ ํ ๋ ํ๋๊ทธ ๋นํธ ์์ฑ์ด ๋ชจ๋ธ์ ์ํ์ ๋ฐฐ์น๋๋ฉด ํ๋๊ทธ ๋นํธ๋ ์ฌ์ ํ ์ํ์ ๋จ์ ์์ผ๋ฉฐ ํ์ด์ง๋ก ๋์๊ฐ ๋ ํ์ ์ฐฝ์ด ๋ค์ ๋ํ๋ฉ๋๋ค.
๊ฐ์ธ์ ์ผ๋ก ๋ฐ์ ๊ตฌ์ฑ ์์์ ์ํ์ ํ์ ์ํ๋ฅผ ๋ฐฐ์นํ๋ ๊ฒ์ด ๋ ์ ์ ํ๋ค๊ณ ์๊ฐํฉ๋๋ค.
๋ฐ์ ๊ตฌ์ฑ ์์์ ์ํ์ ์ถ๊ฐ๋๋ฉด ํจ๊ณผ ์ฝ๋ฐฑ ํ ์ํ ์ ๋ฐ์ดํธ๋ฅผ ํธ๋ฆฌ๊ฑฐํ๋ ๋ฐฉ๋ฒ์ ๋ฌด์์ ๋๊น? ์ ์ง๋ฌธ์ ์ด๊ฒ์ ๋๋ค. componentWillReceiveProps์ ์๋ช ์ฃผ๊ธฐ๋ฅผ ๋ณ๊ฒฝํฉ๋๊น? ์๋๋ฉด ๋ค๋ฅธ ๋ฐฉ๋ฒ์ ๋๊น?
ํด๊ฒฐ์ฑ
์ ์๊ฐํ๋๋ฐ ์ด๊ฒ์ด ์ ์ ํ ์ง ๋ชจ๋ฅด๊ฒ ์ต๋๋ค.
๋ ํจ์น ์ดํํธ ์ก์
์์๋ ์ ์์ ์ธ ํ์ด๋ก๋ ์ธ์๋ ์ํ๋ฅผ ์
๋ฐ์ดํธํ๋ ๋ฉ์๋๋ฅผ ๋ชจ๋ธ์ ํจ๊ณผ์ ๋ํ ๋งค๊ฐ ๋ณ์๋ก ์ ๋ฌํ๊ณ ๋์ค์ ํธ์ถํ์ต๋๋ค. ์ฝ๋ ์ผ :
// route components.js
showDetail = (record) => {
const { dispatch } = this.props;
dispatch({
type: effects.getDetail,
payload: { id: record.id },
callback: () => {
this.setState({
detailVisible: true,
});
},
});
};
// models
effects: {
*getDetail({ payload, callback }, { call, put }) {
const response = yield call(getDetail, payload);
if (response.success) {
if (callback && typeof callback === 'function') {
callback();
}
yield put({
type: 'getDetailSuccess',
payload: response,
});
}
},
}
์ฝ๋ฐฑ์ ์ฌ์ฉํ์ง ๋ง์ญ์์ค. ๋ชจ๋ ํจ๊ณผ๋ ๋์คํจ์น ํ promise๋ฅผ ๋ฐํํฉ๋๋ค. promise์ ํ์ ์ฐฝ์ ์ฒ๋ฆฌํ๊ธฐ ๋งํ๋ฉด๋ฉ๋๋ค.
์ฝ๋ฐฑ์ ์ฌ์ฉํ์ง ๋ง์ญ์์ค. ๋ชจ๋ ํจ๊ณผ๋ ๋์คํจ์น ํ promise๋ฅผ ๋ฐํํฉ๋๋ค. promise์ ํ์ ์ฐฝ์ ์ฒ๋ฆฌํ๊ธฐ ๋งํ๋ฉด๋ฉ๋๋ค.
๊ทธ๊ฒ์ ๋ฌ์ฑํ๋ ๋ฐฉ๋ฒ
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ฝ๋ฐฑ์ ์ฌ์ฉํ์ง ๋ง์ญ์์ค. ๋ชจ๋ ํจ๊ณผ๋ ๋์คํจ์น ํ promise๋ฅผ ๋ฐํํฉ๋๋ค. promise์ ํ์ ์ฐฝ์ ์ฒ๋ฆฌํ๊ธฐ ๋งํ๋ฉด๋ฉ๋๋ค.