2024-06-10 헤더 만들기 (styled-components)

상황

사진은 헤더를 완성한 모습이지만, 헤더를 완성했을 때 메인 영역이 가운데로 좌우 여백을 균등하게 주고 몰려있는 것을 볼 수 있듯, 헤더도 사이즈가 고정이 되어버린다.

 

 

헤더는 좌우 여백없이 전체적으로 꽉 채우고 싶고, 위 사진처럼 브라우저를 축소하더라도 헤더의 영역은 고정되어 풀리지 않게 하고 싶다.

 

해결

1. 개발자 도구를 열어 어디에서 메인의 사이즈를 제한하고 있는지 확인한다.

본인의 경우에는 root에 max-width 속성으로 1280px으러 너비를 제한하고 있고, margin: 0 auto; 속성으로 가운데 정렬을 하고 있음이 확인되었다.

이 상태에서 헤더를 만들어도 root 자체가 1280px로 고정되어 있기 때문에 헤더도 영향을 받아 가운데로 몰리게 된다.

 

2. root의 너비 제한을 풀고, Layout 컴포넌트로 만들기

 

Layout 컴포넌트로 만들어서 화면에서 가운데로 들어가야 할 흰 박스 부분만 Layout 컴포넌트로 감싸고, 너비 제한의 영향을 받으면 안 되는 헤더는 너비제한의 영향을 받지 않게 아래처럼 코드를 작성한다.

 

import styled from "styled-components";
import Header from "./Header";

const StyleDiv = styled.div`
    max-width: 1280px;
    margin: 50px auto;
`

function Layout({ children }) {
    return (
        <>
            <Header />
            <StyleDiv>{children}</StyleDiv>
        </>
    );
}

export default Layout;

 

위에서 props로 받은 children이란, StyleDiv라는 스타일드 컴포넌트로 감싼 모든 부분에 CSS를 적용시킨다는 의미이다. 즉, Layout 컴포넌트의 모든 자식 요소에 StyleDiv 컴포넌트의 스타일을 적용시킨다는 의미이다.

 

그리고 헤더는 외부에서 따로 만들었는데, 헤더를 원래 같으면 App 컴포넌트나 최상위 컴포넌트에서 라우팅 시키겠지만 이곳에서 호출한다. 이렇게 되면 Layout 컴포넌트의 자식 컴포넌트가 되지 않는다.

 

3. 완성된 컴포넌트를 라우팅한다.

// App.jsx

return (
    <>
      <BrowserRouter>
      <Layout>
        <Routes>
          <Route
            path="/"
            element={<Home expenses={expenses} setExpenses={setExpenses} />}
          />
          <Route
            path="/detail/:id"
            element={<Detail expenses={expenses} setExpenses={setExpenses} />}
          />
          <Route path="/signin" element={<SignIn/>} />
        </Routes>
        </Layout>
      </BrowserRouter>
    </>
);

 

헤더는 페이지가 바뀌더라도 고정되어야 하기 때문에 라우트 밖으로 빼주었다.

 

헤더는 웹 사이트를 개발하면서 계속 만드는 것인데, 이 간단해보이는 원리를 잡아가는 순서를 모르면 ChatGPT를 사용해도 개념을 잡기 어렵기 때문에 메모의 필요성을 느껴 TIL로 작성한다.