Dva: ๊ฐ€์žฅ ๋ฐ”๊นฅ ์ชฝ ๋ถ€๋ชจ ๊ตฌ์„ฑ ์š”์†Œ, ์—ฐ๊ฒฐ ๋ฐ ์ž์‹ ๊ตฌ์„ฑ ์š”์†Œ์— ๋Œ€ํ•œ ์—ฐ๊ฒฐ์ด ์—†์œผ๋ฉฐ ์ž์‹์— ๋ชจ๋ธ์ด๋‚˜ dispath๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2017๋…„ 01์›” 19์ผ  ยท  4์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: dvajs/dva

๋‚ด ์žฅ๋ฉด์€ ์ด๋ ‡๊ฒŒ

๋‚˜๋Š” router.jsx๋ฅผ ์ด๋ ‡๊ฒŒ ๋””์ž์ธํ–ˆ์Šต๋‹ˆ๋‹ค.

            <Router history={ history }>

                <Route path="/" getComponents={App}>
                    <IndexRedirect to="projects" />
                    <Route path="projects" getComponents={Projects}></Route>
                    <Route path="dashboard" getComponents={Dashboard}></Route>
                </Route>
                <Route path="*">
                </Route>
            </Router>

๊ฐ€์žฅ ๋ฐ”๊นฅ ์ชฝ ๊ฒฝ๋กœ๊ฐ€ "/"์ธ App.jsx๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

import React, {PropTypes, Component} from 'react';
import {connect} from 'dva';
import {Link} from 'dva/router';
import Header from 'components/Common/ProjectManagementNav/ProjectManagementNav'

const App = (props) => {
    console.log("props",props);
    return  (
        <div>
            <Header />
            {props.children}
        </div>
    )
}

function mapStateToProps({ management }) {
    return { management };
}

export default connect(mapStateToProps)(App);

๋‚ด ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ ์•ฑ์ด ์—ฐ๊ฒฐ๋˜์–ด์žˆ๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‚ด ํ•˜์œ„ ๊ตฌ์„ฑ ์š”์†Œ ํ”„๋กœ์ ํŠธ (path = "projects") ์•„๋ž˜์— ์—ฐ๊ฒฐํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

import React from 'react';
import {connect} from 'dva';
import ProjectsContent from 'components/projects/projectsContent';
const Projects = (props) => {
    console.log(props);
    return (
        <ProjectsContent/>
    );

};

export default Projects;
  • ์ด๋กœ ์ธํ•ด ํ•˜์œ„ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ dispath๋ฅผ ์–ป์ง€ ๋ชปํ•ฉ๋‹ˆ๋‹ค.
  • ์ž์‹ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์—ฐ๊ฒฐํ•˜์ง€ ์•Š๊ณ  ๋ถ€๋ชจ์˜ ์—ฐ๊ฒฐ๋œ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์ง์ ‘ ์—ฐ๊ฒฐ์„ ๋Š์„ ์ˆ˜์žˆ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?
  • ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๋ง ๋œ ํ›„ ์ž์‹ ์ปดํฌ๋„ŒํŠธ๋„ ๋ Œ๋”๋ง์„ ๋”ฐ๋ฅผ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ž์‹ ์ปดํฌ๋„ŒํŠธ๊ฐ€ dispath๋ฅผ ์–ป์„ ์ˆ˜์žˆ๋Š” ํ•œ dispath๋กœ ์ƒํƒœ๋ฅผ ๋ณ€๊ฒฝํ•˜์—ฌ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์˜ ๋ Œ๋”๋ง์„ ํŠธ๋ฆฌ๊ฑฐ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ๊ทธ๋ ‡์ง€ ์•Š์œผ๋ฉด ๊ฐ ๊ฒฝ๋กœ ์•„๋ž˜์˜ ํŒŒ์ผ์— ์—ฐ๊ฒฐํ•ด์•ผํ•ฉ๋‹ˆ๊นŒ?
question

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

์ฝ๊ธฐ ์–ด๋ ค์šด ๊ฒฝ์šฐ ๋‹ค์Œ ๋ฌธ์„œ๋ฅผ ์ฐธ์กฐํ•˜์—ฌ ํ˜•์‹์„ ์กฐ์ •ํ•˜์‹ญ์‹œ์˜ค.

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

์ฝ๊ธฐ ์–ด๋ ค์šด ๊ฒฝ์šฐ ๋‹ค์Œ ๋ฌธ์„œ๋ฅผ ์ฐธ์กฐํ•˜์—ฌ ํ˜•์‹์„ ์กฐ์ •ํ•˜์‹ญ์‹œ์˜ค.

์ •๋ฆฌํ•˜๋‹ค

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

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

์ด๋“ค์„ ๋ชจ๋‘ ์—ฐ๊ฒฐํ•˜๋ฉด ๊ตญ์ œ ์–ธ์–ด๊ฐ€ ์ „ํ™˜ ๋  ๋•Œ ํ•˜์œ„ ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์ •์ƒ์ ์œผ๋กœ ์ „ํ™˜๋˜์ง€ ์•Š์œผ๋ฉฐ ์ „์ฒด ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ ๊ณ ์น˜๋ ค๋ฉด window.location.reload ()๋ฅผ ์‚ฌ์šฉํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ๋‹จ, ์ž์‹ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—ฐ๊ฒฐ๋˜์–ด ์žˆ์ง€ ์•Š์œผ๋ฉด ์ •์ƒ์ ์œผ๋กœ ์ „ํ™˜ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.ํŽ˜์ด์ง€๋ฅผ ์ƒˆ๋กœ ๊ณ ์น˜์ง€ ์•Š๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๊นŒ?

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