Dva: ๋ชจ๋ธ ๋””์ž์ธ

์— ๋งŒ๋“  2016๋…„ 12์›” 08์ผ  ยท  11์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: dvajs/dva

๋ชจ๋ธ์˜ ๋ชจ๋“ˆ ๋ถ„ํ• ์„ "ํŽ˜์ด์ง€ ์œ„๋„"๋˜๋Š” "๋ฐ์ดํ„ฐ ์œ„๋„"๋กœ ๋‚˜๋ˆ„์–ด์•ผํ•ฉ๋‹ˆ๊นŒ?

์˜ˆ :
๋‚ด ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ "๋ฐ์ดํ„ฐ"--- ๋‰ด์Šค ๋‰ด์Šค + ์‚ฌ์šฉ์ž ์‚ฌ์šฉ์ž + ๋Œ“๊ธ€ (3 ๊ฐœ์˜ ๋ฐ์ดํ„ฐ ๋…๋ฆฝ์ )
๋‚ด ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ "ํŽ˜์ด์ง€"--- HomePage ํ™ˆํŽ˜์ด์ง€ + UserPage ๋‚ด ํŽ˜์ด์ง€ (๋‘˜ ๋‹ค ์œ„์˜ "๋ฐ์ดํ„ฐ"์—์žˆ๋Š” ๋ชจ๋ธ๊ณผ ์ž‘์—…์„ ๋‹ค์–‘ํ•œ ์ •๋„๋กœ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค)

1. HomePageModel ๋ฐ UserPageModel ์ƒ์„ฑ
HomePageModel์—์„œ News + User์˜ ๋™์ž‘๊ณผ ๋ชจ๋ธ์„ ๋””์ž์ธํ•ฉ๋‹ˆ๋‹ค.
UserPageModel์—์„œ User + Comment์˜ ๋™์ž‘๊ณผ ๋ชจ๋ธ์„ ๋””์ž์ธํ•ฉ๋‹ˆ๋‹ค.

2. NewsModel, UserModel ๋ฐ CommentModel ์„ค์ •
HomePage ํŽ˜์ด์ง€์—์„œ NewsModel ๋ฐ UserModel ๋ชจ๋“ˆ์„ ์—ฐ๊ฒฐํ•˜๊ณ  UserPage ํŽ˜์ด์ง€์—์„œ UserModel ๋ฐ CommentModel ๋ชจ๋“ˆ์„ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค.

์–ด๋–ค ๋ฐฉ์‹์œผ๋กœ ๋ชจ๋ธ์„ ์„ค๊ณ„ํ•ด์•ผํ•ฉ๋‹ˆ๊นŒ?

question

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

๋ฟก๋ฟก
์ฆ‰, "๋ฐ์ดํ„ฐ ์œ„๋„"์™€ "ํŽ˜์ด์ง€ ์œ„๋„"๋ฅผ ์™„์ „ํžˆ ๋ถ„๋ฆฌํ•˜๊ณ , ๋‹ค๋ฅธ ๋ชจ๋ธ์„ ๋งŒ๋“ค๊ณ , ํ•ด๋‹น "ํŽ˜์ด์ง€ ์œ„๋„"๋ชจ๋ธ๊ณผ ํ•„์š”ํ•œ "๋ฐ์ดํ„ฐ ์ฐจ์›"๋ชจ๋ธ์„ ํŽ˜์ด์ง€์— ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function mapStateToProps(state) {
  return {
    // ๆ•ฐๆฎ็ปดๅบฆๅˆ›ๅปบ็š„model
    users: state.users,
    comments:state.comments,
    // ้กต้ข็ปดๅบฆๅˆ›ๅปบ็š„model
    homePage:state.homePage,
  };
}

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

๋ฟก๋ฟก
์ด ์˜ˆ์ œ๋Š” "๋‹จ์ผ ํŽ˜์ด์ง€"+ "๋‹จ์ผ ๋ฐ์ดํ„ฐ"๋งŒ ํฌํ•จํ•˜๊ธฐ ๋•Œ๋ฌธ์—์ด ์˜ˆ์ œ๊ฐ€ ๋‚ด ์งˆ๋ฌธ์— ๋‹ตํ•˜์ง€ ์•Š๋Š”๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.
๋”ฐ๋ผ์„œ ๋ชจ๋ธ์„ "ํŽ˜์ด์ง€"๋กœ ๋‚˜๋ˆ„๋Š” ๊ฒƒ์œผ๋กœ ์ดํ•ดํ•˜๊ฑฐ๋‚˜ "๋ฐ์ดํ„ฐ"์— ๋”ฐ๋ผ ๋ชจ๋ธ์„ ๋‚˜๋ˆ„๋Š” ๊ฒƒ์œผ๋กœ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ถ”์‹  : ์—ฌ๊ธฐ์— ์–ธ๊ธ‰ ๋œ "ํŽ˜์ด์ง€"๋ถ€๋ฌธ ๋ชจ๋ธ์€ ๊ฐ ํŽ˜์ด์ง€์— ๋Œ€ํ•œ ๋ชจ๋ธ ์ƒ์„ฑ์„ ์˜๋ฏธํ•˜๊ณ  "๋ฐ์ดํ„ฐ"๋ถ€๋ฌธ ๋ชจ๋ธ์€ ๊ฐ ๋…๋ฆฝ ๋ฐ์ดํ„ฐ ๋‹จ์œ„ ๋˜๋Š” ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์— ๋Œ€ํ•œ ๋ชจ๋ธ ์ƒ์„ฑ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.

์ด ์˜ˆ์— ๋Œ€ํ•œ ์ดํ•ด :
1. "ํŽ˜์ด์ง€"๋ถ„ํ•  ๋ชจ๋ธ --- ์ƒˆ ํŽ˜์ด์ง€๊ฐ€์žˆ๋Š” ๊ฒฝ์šฐ ํŽ˜์ด์ง€์— ๋Œ“๊ธ€ ๋ชฉ๋ก๊ณผ ํ•ด๋‹น ์‚ฌ์šฉ์ž ๋ชฉ๋ก์ด ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ์ด ์ƒˆ ํŽ˜์ด์ง€์— ์‚ฌ์šฉํ•  usersAndMessages๋ผ๋Š” ๋ชจ๋ธ์„ ๋งŒ๋“ค์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.
2. "๋ฐ์ดํ„ฐ"๋ถ„ํ•  ๋ชจ๋ธ ---์ด ํŽ˜์ด์ง€์— ์ฃผ์„ ๋ชฉ๋ก์„ ํ‘œ์‹œํ•ด์•ผํ•˜๋Š” ๊ฒฝ์šฐ ์ฃผ์„์ด๋ผ๋Š” ๋‹ค๋ฅธ ๋ชจ๋ธ์„ ๋งŒ๋“ค์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

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

๋‚ด ์ดํ•ด๋Š” "ํŽ˜์ด์ง€"๊ฐ€ โ€‹โ€‹"๋ชจ๋ธ"์— ํ•ด๋‹นํ•œ๋‹ค๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

๋ชจ๋ธ๊ณผ ํŽ˜์ด์ง€๊ฐ€ ์„œ๋กœ ์ผ์น˜ ํ•  ํ•„์š”๋Š” ์—†์œผ๋ฉฐ ๊ฐœ๋ณ„์ ์œผ๋กœ ๋””์ž์ธ ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ํŽ˜์ด์ง€์— ํ•„์š”ํ•œ ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋Š” ์—ฐ๊ฒฐ์„ ํ†ตํ•ด ์–ป์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ฟก๋ฟก
์ฆ‰, "๋ฐ์ดํ„ฐ ์œ„๋„"์™€ "ํŽ˜์ด์ง€ ์œ„๋„"๋ฅผ ์™„์ „ํžˆ ๋ถ„๋ฆฌํ•˜๊ณ , ๋‹ค๋ฅธ ๋ชจ๋ธ์„ ๋งŒ๋“ค๊ณ , ํ•ด๋‹น "ํŽ˜์ด์ง€ ์œ„๋„"๋ชจ๋ธ๊ณผ ํ•„์š”ํ•œ "๋ฐ์ดํ„ฐ ์ฐจ์›"๋ชจ๋ธ์„ ํŽ˜์ด์ง€์— ์—ฐ๊ฒฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

function mapStateToProps(state) {
  return {
    // ๆ•ฐๆฎ็ปดๅบฆๅˆ›ๅปบ็š„model
    users: state.users,
    comments:state.comments,
    // ้กต้ข็ปดๅบฆๅˆ›ๅปบ็š„model
    homePage:state.homePage,
  };
}

@ zerozaki0752 ๋„ค.

@sorrycc ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค! ! !

๋˜ ๋‹ค๋ฅธ ์งˆ๋ฌธ์€ ๋””์Šค์ปค๋ฒ„๋ฆฌ ๋ฐ๋ชจ์˜ ์ผ๋ถ€ ๋ฌธ์ œ์— ๊ด€ํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค.
1. ๋ชจ๋ธ์˜ ์ดํŽ™ํŠธ ๋ฐ ๋ฆฌ๋“€์„œ์— ์ •์˜ ๋œ ๋ฉ”์†Œ๋“œ, ์ผ๋ถ€๋Š” ๋ชจ๋ธ์—์„œ ๋‚ด๋ถ€์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ณ  ์ผ๋ถ€๋Š” ๋ทฐ์—์„œ ํ˜ธ์ถœํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค (๋ช…ํ™•ํ•œ ๊ตฌ๋ถ„ ์—†์Œ).
2. ๋ฐ๋ชจ์—์„œ ์•ก์…˜์„ ํ˜ธ์ถœํ•˜๋Š” ๋ทฐ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด dispatch "namespace / functionName"์ด๋ผ๊ณ ํ•ฉ๋‹ˆ๋‹ค.
3. ๋‘ ๋ฒˆ์งธ ๋งค๊ฐœ ๋ณ€์ˆ˜ ์ธ mapDispatchToProps๋Š” ์—ฐ๊ฒฐํ•  ๋•Œ ์ „๋‹ฌ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

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

์ด๊ฒƒ์ด ํ•ฉ๋ฆฌ์  ์ผ๊นŒ? ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๊นŒ?

์ด๊ฒƒ์€ ๊ฐœ์ธ์ ์ธ ์Šต๊ด€์ž…๋‹ˆ๋‹ค. ์ €๋Š” dispatch (action) ๋ฐฉ์‹์„ ์„ ํ˜ธํ•ฉ๋‹ˆ๋‹ค.

mapDispatchToProps ๋งค๊ฐœ ๋ณ€์ˆ˜๋Š” ์•ก์…˜์„ ๋ฐ”์ธ๋”ฉํ•˜๊ธฐ ์œ„ํ•ด connect์—์„œ ์ „๋‹ฌ๋˜์ง€ ์•Š์ง€๋งŒ ๋””์ŠคํŒจ์น˜๋ฅผ โ€‹โ€‹์‚ฌ์šฉํ•˜์—ฌ ๋ชจ๋“  ๋ชจ๋ธ์˜ ์•ก์…˜์œผ๋กœ ์ „์†กํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?

๊ตฌ์„ฑ ์š”์†Œ์ž…๋‹ˆ๋‹ค connect ์˜ ์†Œํ’ˆํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค dispatch .

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