• 목차

페이지 컴포넌트란?

페이지(Page) 컴포넌트는 컨테이너 또는 프레젠테이셔널 컴포넌트를 조립해 구성합니다. 컨테이너 컴포넌트처럼 상태, 비즈니스 로직을 가질 수 있고 주로 페이지를 렌더링 할 때 사용됩니다.

• 페이지 컴포넌트 → Landing (Home) / Setting / Profile 등
• 컨테이너 컴포넌트 → Header / Form / List 등
• 프레젠테이셔널 컴포넌트 → Avatar / A11yHidden / Button 등

Wireframe App

실습 자료는 와이어프레임(wireframe) 앱입니다.

상태, 라이프 사이클을 가진 WireframeApp 컴포넌트는 마운트 후 브라우저 주소창 경로를 확인해 현재 페이지(current page) 상태를 업데이트 합니다. 상태 업데이트 후 페이지 컴포넌트를 변경합니다. 변경된 페이지 컴포넌트는 Main 컴포넌트의 children으로 설정됩니다.

src/wireframe/App.js

function WireframeApp() {

  const [routes, dispatch] = useReducer(routeReducer, initialRouteInfo);

  useEffect(() => {
    const { location } = window;
    if (location.pathname === '/') location.replace('/landing');

    dispatch({
      type: 'CHANGE_ROUTE',
      payload: location.pathname.replace('/', ''),
    });
  }, []);

  const navigation = useMemo(() => routes.navigation, [routes.navigation]);
  const currentPage = useMemo(() => routes.currentPage, [routes.currentPage]);
  const CurrentPageComponent = useMemo(() => getPageComponent(currentPage), [currentPage]);

  return (
    <div className={styles.wireframe}>
      <Header className="wireframeBox">
        <Navigation list={navigation} currentPage={currentPage} />
      </Header>
      <Main>
        <CurrentPageComponent />
      </Main>
      <Footer>
        <div className="wireframeBox" />
      </Footer>
    </div>
  );

}

디렉토리 구성