dB's Codeshare

Universal Routing 리액트 universal routing은 간단한 미들웨어 스타일 라우터로 isomorphic JavaScript web apps과 single-page 애플리케이션을 위해 제작 되었습니다. 각각의 라우터는 children:[ ] 속성이 있습니다. 이 속성을 사용하여 각각의 path에 따라 보여지는 컴포넌트를 랜더링 할 수 있습니다. const routes = { path: '/admin' children: [ { path: '/', action: () => {/* ... */} // www.example.com/admin }, { path: '/users', children: [ { path: '/', action: () => {/* ... */} // www.example.com/admin/users }, { path: '/:id', action: () => {/* ... */} // www.example.com/admin/users/123 } ] } ] }; 아래와 같이 상품리스트 페이지가 있고, 상품리스트 중에서 하나의 상품을 클릭하면 선호도에 대한 상세 페이지로 이동합니다. 상품리스트는 items이며 하나의 상품id를 333으로 하도록 하겠습니다. 즉, 상품리스트는 상위 페이지며 자식 페이지로 남녀선호도, 연령별선호도, 국가별선호도가 위치합니다. 상품리스트 // items |_ 남녀선호도 // items/333/gender |_ 연령별선호도 // items/333/age |_ 국가별선호도 // items/333/nations export default { path: '/items', children: [{...

컴포넌트 제작 1. Small, focussed component 2. Container component class Sidebar extends React.Component { componentDidMount() { fetch('api.com/sidebar') .then(res => { this.setState({ items: res.items }) }); } render() { return ( <div className="sidebar"> {this.state.items.map(item => ( <div className="sidebar__item">{item}</div> ))} </div> ) } } Containers와 components를 분리합니다. Containers는 작동원리를 포함하고, components는 어떻게 보이는지를 나타냅니다. class SidebarContainer extends React.Component { componentDidMount() { fetch('api.com/sidebar') .then(res => { this.setState({ items: res.items }) }); } render() { return ( <Sidebar> {this.state.items.map(item => ( <SidebarItem item={item} /> ))} </Sidebar> ) } } 그렇다면 스타일링은 어떨까요? 1. Single-use classes 2. Components as a s...