React - props 활용해서 component 만들기

ReactDOM.render로 각종 HTML 태그를 입력해서 화면에 출력할 수 있었고

이를 잘게 쪼개서 component로 바꿀 수 있었습니다.

Card 라는 component를 만들어서 <Card />를 여러개 입력하면 그만큼 출력이 가능하죠.

(비욘세 누나 너무 아름다우시네...)

 

이렇게 component를 만든다면 비욘세 누나만 계속 나오고 다른 인물들을 추가하기 위해서는 새로운 component를 또 만들어줘야 합니다.

(물론 저는 비욘세 누나 있는 component만 반복해서 출력해도 너무 좋습니다.)

 

하지만 아쉬워하실 분들을 위해 props라는 기능이 있습니다.

 

HTML 태그 안에 속성부터 태그 안에 넣을 데이터까지 컨트롤이 가능합니다.

함수에 props라는 인자만 추가해준다면 말이죠.

<Card>라는 태그 안에 name, img, phoneNumber, email과 같은 인자들을 넣어주면 

이 인자들을 Card component가 읽어서 각 HTML 태그 안에 해당 정보를 대입시켜서 출력해줍니다.

(사나 너무 예쁘네요...)

---

vanila js에서 함수에서 인자를 받는 방식이 react에서 어떻게 사용되는지 배웠습니다. 

 

큰 틀을 만든 후에 원하는 데이터를 넣어 똑같은 형식에 다른 정보를 출력하는 효율적인 방식이 바로 props였습니다.

 

props는 component를 constructor처럼 사용하는 것으로 정리가 되네요.

(비욘세, 사나 다시봐도 너무 예쁘고 아름답네...)