넷플릭스 클론코딩 5 Creating the Jumbotron component

fixtures/jombotron 출력하기

jumbotron.js

import styled from 'styled-components/macro';

export const Inner = styled.div`
  display: flex;
  align-items: center;
  flex-direction: ${({ direction }) => direction};
  justify-content: space-between;
  max-width: 1100px;
  margin: auto;
  width: 100%;

  @media (max-width: 1000px) {
    flex-direction: column;
  }
`;

export const Container = styled.div``;

jumbotron/index.js

import React from "react";
import { Container, Inner } from "./styles/jumbotron";

export default function Jumbotron({children , direction = "row", ...restProps}) {
  return (
    <Inner direction={direction}>
      {children}
    </Inner>
  )
}

Jumbotron.Container = function JumbotronContainer({children, ...restProps}) {
  return <Container {...restProps}>{children}</Container>
}

app.js

import Jumbotron from "./components/jumbotron";
import jumboData from "./fixtures/jumbo";

export default function App() {
  return (
    <div>
      <Jumbotron.Container>
        {jumboData.map((item) => (
          <Jumbotron key={item.id} direction={item.direction}>
            <p>{item.title}</p>
            <p>{item.subTitle}</p>
            <p>{item.image}</p>
            <p>{item.alt}</p>
          </Jumbotron>
        ))}
      </Jumbotron.Container>
    </div>
  );
}

알아야할 내용

중요 코드

export default function Jumbotron({children , direction = "row", ...restProps}) {
  return (
    <Inner direction={direction}>
      {children}
    </Inner>
  )
}

### spread 문법 (...restProps)
JSX에서 사용되는 모든 속성(props)을 모아서 객체로 받아오는 문법. 이렇게 수집된 속성들은 restProps라는 이름의 객체에 할당, 이렇게 수집된 속성들은 다른 컴포넌트로 전달하거나 필요에 따라 사용


### children
children은 React 컴포넌트에서 내부에 포함된 컨텐츠.

### direction={direction}

flex-direction: ${({ direction }) => direction};

동적 스타일을 지정하고 사용
동적 prop을 전달하는것 direction = "row" 로 받은 prop이 Inner 컴포넌트로 전달되어 Inner 컴포넌트에서 flex-direction 속성을 동적으로 설정하였다.



## 기타

### * styled-components/macro 사용 이유
styled-components 라이브러리는 CSS-in-JS 스타일링을 지원하는 인기 있는 도구이다. 그러나 styled-components를 가져오는 두 가지 방법에는 차이가 있다.

import styled from 'styled-components/macro';

macro 형식의 styled-components는 개발자에게 다양한 이점을 제공한다.
주요 이점 중 하나는 자동으로 생성된 클래스 이름을 경량화하여 번들 크기를 줄이고, 디버깅을 더 쉽게 할 수 있다는 점이다.
또한, macro 형식을 사용하면 "Interpolation"을 사용할 때 더 명확하고 예측 가능한 결과를 얻을 수 있다.

import styled from 'styled-components';

이 형식은 일반적인 방식으로 styled-components 패키지를 가져오는 방법이다.
이 경우, styled-components는 일반적인 기능과 기본 동작을 제공한다.
> 요약
번들 크기를 조금 더 줄이고 싶거나 특정 기능을 사용하고 싶지 않다면, styled-components 패키지를 그냥가져온다.
일반적으로, 대부분의 프로젝트에서는 import styled from 'styled-components'; 형식을 사용하여 styled-components를 가져오는 것이 일반적 styled-components/macro 형식은 번들 크기 최적화나 특정 기능이 필요한 경우에 선택적으로 사용될 수 있다.


### * Troubleshooting
튜토리얼을 따라가던중 바벨 관련 오류가 났었는데
babel-preset-react-app 의존성이 @babel/plugin-proposal-private-property-in-object 패키지를 자체 의존성으로 선언하지 않고 가져오고 있어서 그런 오류가 나온것같다.

yarn add --dev @babel/plugin-proposal-private-property-in-object
yarn add --dev babel-plugin-styled-components

바벨관련 패키지들을 설치하고 진행하니 잘 출력이 되었다. 


~~44:08분~~