๋ชจ๋ธ์ ๋ชจ๋ ๋ถํ ์ "ํ์ด์ง ์๋"๋๋ "๋ฐ์ดํฐ ์๋"๋ก ๋๋์ด์ผํฉ๋๊น?
์ :
๋ด ์ ํ๋ฆฌ์ผ์ด์
์ "๋ฐ์ดํฐ"--- ๋ด์ค ๋ด์ค + ์ฌ์ฉ์ ์ฌ์ฉ์ + ๋๊ธ (3 ๊ฐ์ ๋ฐ์ดํฐ ๋
๋ฆฝ์ )
๋ด ์์ฉ ํ๋ก๊ทธ๋จ์ "ํ์ด์ง"--- HomePage ํํ์ด์ง + UserPage ๋ด ํ์ด์ง (๋ ๋ค ์์ "๋ฐ์ดํฐ"์์๋ ๋ชจ๋ธ๊ณผ ์์
์ ๋ค์ํ ์ ๋๋ก ์ฌ์ฉํฉ๋๋ค)
1. HomePageModel ๋ฐ UserPageModel ์์ฑ
HomePageModel์์ News + User์ ๋์๊ณผ ๋ชจ๋ธ์ ๋์์ธํฉ๋๋ค.
UserPageModel์์ User + Comment์ ๋์๊ณผ ๋ชจ๋ธ์ ๋์์ธํฉ๋๋ค.
2. NewsModel, UserModel ๋ฐ CommentModel ์ค์
HomePage ํ์ด์ง์์ NewsModel ๋ฐ UserModel ๋ชจ๋์ ์ฐ๊ฒฐํ๊ณ UserPage ํ์ด์ง์์ UserModel ๋ฐ CommentModel ๋ชจ๋์ ์ฐ๊ฒฐํฉ๋๋ค.
์ด๋ค ๋ฐฉ์์ผ๋ก ๋ชจ๋ธ์ ์ค๊ณํด์ผํฉ๋๊น?
๋ฟก๋ฟก
์ด ์์ ๋ "๋จ์ผ ํ์ด์ง"+ "๋จ์ผ ๋ฐ์ดํฐ"๋ง ํฌํจํ๊ธฐ ๋๋ฌธ์์ด ์์ ๊ฐ ๋ด ์ง๋ฌธ์ ๋ตํ์ง ์๋๋ค๊ณ ์๊ฐํฉ๋๋ค.
๋ฐ๋ผ์ ๋ชจ๋ธ์ "ํ์ด์ง"๋ก ๋๋๋ ๊ฒ์ผ๋ก ์ดํดํ๊ฑฐ๋ "๋ฐ์ดํฐ"์ ๋ฐ๋ผ ๋ชจ๋ธ์ ๋๋๋ ๊ฒ์ผ๋ก ์ดํดํ ์ ์์ต๋๋ค.
์ถ์ : ์ฌ๊ธฐ์ ์ธ๊ธ ๋ "ํ์ด์ง"๋ถ๋ฌธ ๋ชจ๋ธ์ ๊ฐ ํ์ด์ง์ ๋ํ ๋ชจ๋ธ ์์ฑ์ ์๋ฏธํ๊ณ "๋ฐ์ดํฐ"๋ถ๋ฌธ ๋ชจ๋ธ์ ๊ฐ ๋
๋ฆฝ ๋ฐ์ดํฐ ๋จ์ ๋๋ ๋น์ฆ๋์ค ๋ก์ง์ ๋ํ ๋ชจ๋ธ ์์ฑ์ ์๋ฏธํฉ๋๋ค.
์ด ์์ ๋ํ ์ดํด :
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
.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋ฟก๋ฟก
์ฆ, "๋ฐ์ดํฐ ์๋"์ "ํ์ด์ง ์๋"๋ฅผ ์์ ํ ๋ถ๋ฆฌํ๊ณ , ๋ค๋ฅธ ๋ชจ๋ธ์ ๋ง๋ค๊ณ , ํด๋น "ํ์ด์ง ์๋"๋ชจ๋ธ๊ณผ ํ์ํ "๋ฐ์ดํฐ ์ฐจ์"๋ชจ๋ธ์ ํ์ด์ง์ ์ฐ๊ฒฐํ ์ ์์ต๋๋ค.