Dva: ํšจ๊ณผ๊ฐ€ ๋น„๋™๊ธฐ ์ ์œผ๋กœ ์‹คํ–‰ ๋œ ํ›„ ์ƒํƒœ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?

์— ๋งŒ๋“  2018๋…„ 04์›” 10์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: dvajs/dva

์˜ˆ์ƒ๋˜๋Š” ๊ธฐ๋Šฅ์€ ํšจ๊ณผ๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ๋น„๋™๊ธฐ ์ ์œผ๋กœ ์ˆ˜์ง‘ ํ•œ ํ›„ ํŒ์—… ์ฐฝ์— ์ˆ˜์ง‘ ๋œ ๋ฐ์ดํ„ฐ๊ฐ€ ํ‘œ์‹œ๋œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ตฌ์„ฑ ์š”์†Œ ํ‘œ์‹œ ์—ฌ๋ถ€์— ๋Œ€ํ•œ ๊ตฌ์„ฑ ์š”์†Œ ์ƒํƒœ ํ”Œ๋ž˜๊ทธ ์†์„ฑ์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. ํŽ˜์ด์ง€๊ฐ€ ์ ํ”„ ํ•  ๋•Œ ํ”Œ๋ž˜๊ทธ ๋น„ํŠธ ์†์„ฑ์ด ๋ชจ๋ธ์˜ ์ƒํƒœ์— ๋ฐฐ์น˜๋˜๋ฉด ํ”Œ๋ž˜๊ทธ ๋น„ํŠธ๋Š” ์—ฌ์ „ํžˆ ์ƒํƒœ์— ๋‚จ์•„ ์žˆ์œผ๋ฉฐ ํŽ˜์ด์ง€๋กœ ๋Œ์•„๊ฐˆ ๋•Œ ํŒ์—… ์ฐฝ์ด ๋‹ค์‹œ ๋‚˜ํƒ€๋‚ฉ๋‹ˆ๋‹ค.

question

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ฝœ๋ฐฑ์„ ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์‹ญ์‹œ์˜ค. ๋ชจ๋“  ํšจ๊ณผ๋Š” ๋””์ŠคํŒจ์น˜ ํ›„ promise๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. promise์˜ ํŒ์—… ์ฐฝ์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ๋งŒํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  5 ๋Œ“๊ธ€

๊ฐœ์ธ์ ์œผ๋กœ ๋ฐ˜์‘ ๊ตฌ์„ฑ ์š”์†Œ์˜ ์ƒํƒœ์— ํŒ์—… ์ƒํƒœ๋ฅผ ๋ฐฐ์น˜ํ•˜๋Š” ๊ฒƒ์ด ๋” ์ ์ ˆํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๋ฐ˜์‘ ๊ตฌ์„ฑ ์š”์†Œ์˜ ์ƒํƒœ์— ์ถ”๊ฐ€๋˜๋ฉด ํšจ๊ณผ ์ฝœ๋ฐฑ ํ›„ ์ƒํƒœ ์—…๋ฐ์ดํŠธ๋ฅผ ํŠธ๋ฆฌ๊ฑฐํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ์ œ ์งˆ๋ฌธ์€ ์ด๊ฒƒ์ž…๋‹ˆ๋‹ค. 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์˜ ํŒ์—… ์ฐฝ์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ๋งŒํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค.

๊ทธ๊ฒƒ์„ ๋‹ฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰