props

부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용




진행중인 프로젝트에서 props 사용 연습을 해봤다.


최종적으로 사진처럼 글자가 생기게 할 것 이다.





먼저 Title이라는 이름으로 컴포넌트 분리를 해줬다.

  const title = "SUDOLOG";
  const subTitle = "수돌이의 소중한 하루를 기록해요";

  <Title title={title} subTitle={subTitle} />

메인페이지에 title과 subTitle을 정의해주고 Title이 들어갈 자리에 코드를 작성해준다.

function Title({ title, subTitle }) {
  return (
    <Stack>
      <Stack fontSize="40px" margin="0 0 0px 0px">
        {title}
      </Stack>
      <Stack fontSize="26px" margin="0 0 20px 0px">
        {subTitle}
      </Stack>
    </Stack>
  );
}

Title에 작성한 코드이다. title,subTitle이 props 역할이다.

function Title(props) {
  return (
    <Stack>
      <Stack fontSize="40px" margin="0 0 0px 0px">
        {props.title}
      </Stack>
      <Stack fontSize="26px" margin="0 0 20px 0px">
        {props.subTitle}
      </Stack>
    </Stack>
  );
}

코드처럼 props라는 이름으로 객체 안의 props들을 한번에 불러와서 쓸 수 있다.