만들면서 배우는 react : 기초 - 4

자, 이제 본격적으로 컴포넌트를 만들어보잡!!!

---

const mainCard = (
  <div className="main-card">
    <img src="https://cataas.com/cat/60b73094e04e18001194a309/says/react" alt="고양이" width="400" />
    <button>🤍</button>
  </div>
);

위의 코드를 아래와 같이 바꿀 수 있다.

//화살표 함수 버전
const MainCard = () => {
  return (
    <div className="main-card">
      <img src="https://cataas.com/cat/60b73094e04e18001194a309/says/react" alt="고양이" width="400" />
      <button>🤍</button>
    </div>
  );
}

//그냥 함수버전
function MainCard() {
  return (
    <div className="main-card">
      <img src="https://cataas.com/cat/60b73094e04e18001194a309/says/react" alt="고양이" width="400" />
      <button>🤍</button>
    </div>
  );
}

근데 우리는 컴포넌트를 재사용성이 있게 활용하고 싶다.
image 요소를 재활용한다고 해보자
재활용할 거면 요소를 넘겨주고 받아와야겠지?

const app = (
  <div>
    <MainCard img="https://cataas.com/cat/60b73094e04e18001194a309/says/react"/>
  </div>
);

사용을 원하는 곳에서 저렇게 태그형태로 쓸 수 있는데,
img 적어준 것처럼 원하는 요소를 적어주면 된다.
그럼 이제 저걸 받아보잡

function MainCard(props) {
  return (
    <div className="main-card">
      <img src={props.img} alt="고양이" width="400" />
      <button>🤍</button>
    </div>
  );
}

요소들을 props라는 이름으로 받아준다.
우리가 한개만 넘겨줘서 그렇지 사실은 여러개 요소를 보낼 때도 있는데 전부 props로 받아준다.
props들은 object 형태로 오기때문에 key값을 반드시 명시해줘야 값이 찍힌다.
요소의 이름을 정해주지 않고 전달할 수도 있다.

const app = (
  <div>
    <Title>1번째 고양이 가라사대</Title>
    <Title>2번째 고양이 가라사대</Title>
  </div>
);

이렇게 넘겨주면 children 이라는 key값으로 자동으로 넘겨진다.
{props.children} 으로 받으면 된담 ㅎㅎ
props 없이 바로 풀어서 받아줄 수도 있다.

function MainCard({img}) (
    <div className="main-card">
      <img src={img} alt="고양이" width="400" />
      <button>🤍</button>
    </div>
  );

문법이 다양하니 헷갈리지 않도록 익혀두자..!