카테고리별 페이지 레이아웃 적용법

두가지 신경 쓰실 게 있는데, 첫번째는 레이아웃이고, 두번째는 url parameter 설정입니다.

레이아웃

<div>
            <Layout>
                <Header style={{ backgroundColor: '#fff', height: '200px', padding: '0' }}>
                    <div>
                        <img src={forSlider3} style={{ height: '200px', width: '100%' }} />
                    </div>
                </Header>

                <Layout>
                    <Sider style={{ backgroundColor: '#f0f2f5' }}
                        width="400px"
                        breakpoint="lg"
                        collapsedWidth="0"
                        onCollapse={(collapsed, type) => { console.log(collapsed, type); }}>
                        <Affix>
                            <Menu
                                mode="inline"
                                defaultSelectedKeys={["professor"]}
                                selectedKeys={this.state.currentMenuKey}
                                style={{ height: '100%', margin: '10px', border: '1px solid #aaaaaa', borderRadius: '10px' }}
                            >
                                <MenuItemGroup className="menuGroup" key="g1" title="구성원">
                                    <Menu.Item key="professor" onClick={() => this.props.history.push('/members/professor')}>교수</Menu.Item>
                                    <Menu.Item key="honourProfessor" onClick={() => this.props.history.push('/members/honourProfessor')}>역대교수진</Menu.Item>
                                    <Menu.Item key="staff" onClick={() => this.props.history.push('/members/staff')}>행정직원</Menu.Item>
                                </MenuItemGroup>
                            </Menu>
                        </Affix>
                    </Sider>

                    <Content className="pageContent">
                        {this.renderSubCategoryPage(this.state.currentSubCategory)}
                    </Content>
                </Layout>
            </Layout>
        </div>

2018-06-16 18 56 34 위의 그림에서 footer가 없는 경우라고 생각하면 됩니다. https://ant.design/components/layout/ 참고하시면 되고요, 저희는 여기서 특별히 'Sider'에 메뉴바를 넣었습니다. 저쪽에 서브카테고리들(ex소개 -> 학부장소개, 학부장인사말, 동아리소개, 오시는 길 ...) 을 넣으시면 됩니다. 그리고 'Content'에는 다음과 같은 렌더함수를 이용하여 {this.renderSubCategoryPage(this.state.currentSubCategory)} 계층적인 오버레이를 만드는 것입니다.

Url로 접근하거나 혹은 네비게이션 바의 버튼을 눌러 들어오거나 등등 해당 서브카테고리로 접근 시 (ex http://localhost:8080/members/honourProfessor) url의 파라미터(honourProfessor)에서 서브카테고리 정보를 뺀다음, react state에 저장하고, 렌더함수에 해당 항목을 넘기는 방식입니다.

index.js에 보시면 라우터가

<Route path="/members/:category" component={MembersPage} />
 <Route path="/members" component={MembersPage} />

이렇게 되있는데 저기서 /:category가 파라미터입니다. 지금 너무 많은 라우터들이 있는데 다 저런식으로 정리해주시면 됩니다.

그리고 더 많은 파라미터를 전달할 경우 예를들어 <Route path="/reservation/:category/:roomkey?" component={ReservationPage} /> 물음표를 넣어 파라미터를 옵션으로 지정할 수 있습니다. (/:roomkey?가 옵션입니다." 사실 카테고리도 옵션으로 줄 수 있는데, 가독성을 위해 분리했습니다.

요약하자면 세가지입니다. 1.브라우저의 url창으로 서브카테고리 페이지 ex http://localhost:8080/members/honourProfessor) 접근할경우 2.페이지 내에서 사이드바 클릭으로 다른 서브카테고리로 이동할 경우 3.메인페이지에서 네비게이션 바를 클릭해 들어올 경우

1번은 componentWillMount() 로 핸들하고, 2,3번은 componentWillReceiveProps(newProps)로 핸들합니다. 기본적으로 둘은 같은 기능을 수행합니다. 그리고 2번의 클릭핸들은 <Menu.Item key="professor" onClick={() => this.props.history.push('/members/professor')}>교수</Menu.Item> 와 같이 아예 페이지를 다시 넘기는 듯한 동작으로 처리합니다.(물론 리액트니까 컴포넌트만 변화되는거같습니다) 3번은 일반적인 url 설정하듯이 네비게이션 바의 to를 바꿔주세요.

일단 급하게 썼는데, MembersPage 참고하면 어렵지 않을 거 같습니다.

hyBlue / -13-SNUCSE-website-SWPP-

카테고리별 페이지 레이아웃 적용법 #41