24.3.1 헤더 컴포넌트 만들기

    헤더 컴포넌트를 만들기 전에 Responsive라는 컴포넌트를 작성하겠습니다. 반응형 디자인을 할 때 더 편하게 작업하기 위해서입니다. Responsive 컴포넌트는 추후 다양한 컴포넌트에서 사용할 수 있기 때문에 common 디렉터리로 분류합니다.

    components/common/Responsive.js

    import React from 'react';
    import styled from 'styled-components';
    
    const ResponsiveBlock = styled.div`
      padding-left: 1rem;
      padding-right: 1rem;
      width: 1024px;
      margin: 0 auto; /* 중앙 정렬 */
    
      /* 브라우저 크기에 따라 가로 크기 변경 */
      @media (max-width: 1024px) {
        width: 768px;
      }
      @media (max-width: 768px) {
        width: 100%;
      }
    `;
    
    const Responsive = ({ children, ...rest }) => {
      // style, className, onClick, onMouseMove 등의 props를 사용할 수 있도록
      // ...rest를 사용하여 ResponsiveBlock에게 전달
      return <ResponsiveBlock {...rest}>{children}</ResponsiveBlock>;
    };
    
    export default Responsive;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.