Props

각 버튼을 리액트로 구현한다고 가정합니다.

이미지와 텍스트만 변경해서 랜더링해주면 됩니다.

이를 간단하게 코드로 표현하면 아래와 같을 것 입니다.

function App() {
	<>
      return (
        <Button/>
        <Button/>
        <Button/>
          ...
      );
	</>

}

여기서 각각의 버튼이 어떤 버튼이 될지를 결정하는 값을 전달해 주어야 합니다.

function App() {
	<>
      return (
          <Button text={"메일"} img={mail.png}/>
          <Button text={"카페"} img={cafe.png}/>
          <Button text={"블로그"} img={blog.png}/>
            ...
      );
	</>
    }

메일이라는 text와 mail.png라는 img 값을 전달할 수 있는데, 이를 Props라고 합니다.

마치 함수의 인수를 전달하듯 원하는 값을 전달할 수 있습니다.

Props(properties)를 이용하면 Component를 함수를 호출하듯
각각 다른 UI를 렌더링하도록 할 수 있습니다.