React_ Tesla 사이트 클론 - 2

이전 포스팅에 이어 각 섹션별로 다르게 나타내려면 어떻게 해야 할까.
Section태그에 프로퍼티들을 파라미터로 넘겨주면 된다.
먼저 넘겨줄 프로퍼티를 작성해두자.

function Home() {
  return (
    <Container>
      <Section
        title="Model S"
        description="Order Online for Touchless Delivery"
        backgroundImg="model-s.jpg"
        leftBtnText="Custom Order"
        rightBtnText="Existing Inventory"
      />
      <Section />
      <Section />
    </Container>
  );

이제 Section.js에서 내용들을 텍스트가 아닌 파라미터로 넘겨준 프롭으로 채우면 된다.
그 전에 clg를 이용해 프롭을 어떤 형태로 넘겨주는지 살펴보면

이렇게 객체 형태로 넘겨주고 있다.
요것들을 이용해 다시 작성해보면

function Section(props) {
  console.log(props);
  return (
    <Wrap>
      <ItemText>
        <h1>{props.title}</h1>
        <p>{props.description}</p>
      </ItemText>
      <Buttons>
        <ButtonGroup>
          <LeftButton>{props.leftBtnText}</LeftButton>
          <RightButton>{props.rigntBtnText}</RightButton>
        </ButtonGroup>
        <DownArrow src="/images/down-arrow.svg" />
      </Buttons>
    </Wrap>

여기서 props를 destructor 문법으로 작성해보면

function Section({title, description, leftBtnText, rigntBtnText}) {
  console.log(props);
  return (
    <Wrap>
      <ItemText>
        <h1>{title}</h1>
        <p>{description}</p>
      </ItemText>
      <Buttons>
        <ButtonGroup>
          <LeftButton>{leftBtnText}</LeftButton>
          <RightButton>{rigntBtnText}</RightButton>
        </ButtonGroup>
        <DownArrow src="/images/down-arrow.svg" />
      </Buttons>
    </Wrap>
  );
}

사실 이번 프로젝트에서는 굳이 destructor문법을 안쓰는 쪽이 타이핑 수고가 적지만 큰 프로젝트를 진행한다 했을때엔 또 다른이야기가 된다.

이전과 동일하다 다른 섹션들의 변수도 채워보자

Y부터 X까지 다 작성하였는데 이미지가 바뀌지 않는 문제점이 있다 이것 또한 동일한데 몇가지 추가로 작성해야 할 것이 있다.
일단 이전과 동일하게 backgroundImg를 파라미터로 넘겨주고 최상위인 Wrap div태그에 넘겨준 파라미터를 받아주자

function Section({
  title,
  description,
  leftBtnText,
  rightBtnText,
  backgroundImg,
}) {
  return (
    <Wrap bgImage={backgroundImg}>
      <ItemText>

그리고 styled에서

  background-image: ${(props) => `url("/images/${props.bgImage}")`};

props로 구성된 배경이미지 경로를 추가해주면

화면마다 다른 사진이 배경이미지에 나온다.

홈화면을 구성하는 각 섹션의 배치가 마무리되었다 나머지는 또 다음 포스팅에서 알아보도록 하자