트러블 슈팅: 레이아웃 컴포넌트 활용 - minumsa/daily-practice GitHub Wiki

문제 상황

페이지별 컴포넌트를 하나씩 생성하다 보니 각각의 컴포넌트 사이에 중복 코드가 생겨나기 시작했습니다. 초기에는 중복 코드의 양이 적은 편이어서 그냥 두었는데, 공통 요소를 변경해야 할 때마다 페이지별 컴포넌트에서 동일한 부분을 반복적으로 수정하는 작업이 불편하게 느껴졌습니다.

프로젝트에서 개선하고자 했던 부분은 다음과 같습니다.

  • 재사용 가능한 레이아웃 만들기
  • 여러 개의 컴포넌트에서 공통으로 사용되는 로직 재사용하기

해결 과정

Layout 컴포넌트

관련해서 구글링을 해보았고, React의 디자인 패턴인 Layout 컴포넌트에 대해 알게 되었습니다. 재사용 가능한 요소를 모아 Layout 컴포넌트에 채워 넣었고, 각각의 페이지 컴포넌트에서 children 위치에 필요한 부분 전체를 props로 전달하면 원하는 결과를 표시할 수 있는 형태로 만들었습니다.

// introduction.tsx

const Page = () => {
  return (
      <Layout>
        <Introduction />
      </Layout>
  );
};

한편 Layout 컴포넌트는 이후 적용한 다크모드를 구현할 때도 효과적이었습니다. styled-components를 통해 전역 스타일(다크모드/라이트모드의 색상 코드)을 관리하려면 ThemeProvider로 코드의 최상위 컴포넌트를 감싸야 했는데, 결과적으로 Layout 컴포넌트에만 적용하면 됐기에 다크모드 구현이 수월했습니다.

// Layout.tsx

...
  return ( 
    <ThemeProvider theme={isDarkMode ? darkTheme : lightTheme}>
      <GlobalStyle />
      <div className="container">
        // ...
      </div>
    </ThemeProvider>
  ); 
};

배운 점

  • 재사용성을 높이기 위해 React의 디자인 패턴 중 하나인 Layout 컴포넌트를 이해하고 적용해보았습니다.
  • 코드 재사용성의 중요성을 실제 상황을 통해 깊이 체감했습니다. 앞으로는 프로젝트 계획 단계에서부터 재사용 가능한 요소를 미리 고려해야겠다는 교훈을 얻었습니다.
⚠️ **GitHub.com Fallback** ⚠️