[React] Layout / Contents 컴포넌트 분리

Lnb, Top 영역은 컴포넌트로 빼더라도,

모든 페이지마다 전체 화면을 감싸는 영역과 Lnb, Top 영역을 반복해서 작성하는 건 불편합니다.

 

페이지에서는 해당페이지의 내용(Contents)만 작성하고 싶습니다. 

 

[ 원하는 결과물 ]

- Layout (공통으로 감싸는 영역) : 바깥의 빨간색 테두리 영역
    - Top(GNB) : 상단 메뉴 영역 (파란색 테두리)
    - LNB : 좌측 메뉴 영역 (파란색 테두리) 
    - Contents 부분은 Route로 매핑하여 Contents 부분만 변경되도록 (검은색 영역)

          ==> 각 페이지 컴포넌트는 Contents 영역만 작성하면 되도록

 

 

[ 폴더 구조 추가 ]

- /commons 폴더 : 컴포넌트가 아닌 순수 자바스크립트 공통 함수들 모음
- /components 폴더 : Top / Lnb / 페이징 등 전반적인 페이지에서 공통으로 쓰는 컴포넌트 모음
- /layouts 폴더 : 감싸는 영역 부분
- /pages 폴더 : Contents 부분에 보여질 컴포넌트 모음, route로 이동하도록 할 예정

 

[ Router 설치 ] 

- Router에 url / 컴포넌트 매핑을 하기 위해 설치

npm i react-router-dom

[ Route 확인을 위한 페이지 생성 ]

 

[ Route 매핑 ] 

// Layout 적용 전 코드
function RoutesMap(){
    return <BrowserRouter>
        <Routes>
            <Route path={"/page1"} element={<Page1/>}/>
            <Route path={"/page2"} element={<Page2/>}/>
            <Route path={"/no-layout"} element={<NoLayout/>}/>
        </Routes>
    </BrowserRouter>
}

[ App 컴포넌트에서 RouteMap 컴포넌트를 랜더링 하도록 수정 ] 

function App() {
    return <RoutesMap />;
}

 

위 코드 작성 후 해당 경로 확인하면 정상적으로 나오는 것을 확인할 수 있다. 
http://localhost:3000/page1
http://localhost:3000/page2

[ Layout 컴포넌트 추가 ] 

- /layouts/Layout.js 생성 및 작성 
1. /samples/SampleLayout.js 컴포넌트 내용 복사해서 붙여넣기 
2. <div className="lnb">...</div> 영역 Lnb 컴포넌트로 분리 (Lnb.js)
3. <div className="top_area">...</div> 영역 Top 컴포넌트로 분리 (Top.js)
4. <div className="contents">Contents</div> 부분이 각 Contents 페이지로 보여지도록 한다
    : Layout.js의 <Outlet /> 을 사용하면 해당 부분이 Layout 하위의 Route 컴포넌트(Page1, Page2)로 각각 치환된다. 

라우트에 따른 Contents 확인 

 

현재 폴더 구조

Git : https://github.com/sosohanya/sosohanya-react-admin/tree/003_layout

 

2022.07.31 - [React] React 프로젝트 만들기 (CRA)

2022.08.14 - [React] Layout 분리 전, 샘플 페이지 작성

2022.08.21 - [React] Layout / Contents 컴포넌트 분리

2022.10.25 - [React] Modal Popup 처리 (ReactDOM.createPortal)