[React] Props

Props 는 렌더링 호출되는 컴포넌트들의 속성 값들이라고 볼 수 있습니다.

 

 

 

태그를 처음 다뤄본다면 위와 같이 여러 동일한 컨텐츠들을 수작업으로 일일히 하나씩 추가해야했을 것입니다.

이것을 보완해서 작성해보겠습니다.

 

 

반복되는 내용들을 단일 function 한 개로 만든 다음 렌더 함수에서 해당 Card 를 세 번 불러오기만 하면 반복적으로 내용들을 불러올 수 있습니다.
렌더링 함수 쪽에 보면 <Card /> 형식으로 마치 컴포넌트를 불러오는 것처럼 호출할 수도 있고, {Card()} 형식을 통해 같은 파일 내에 js 요소를 불러오는 형식으로도 호출할 수 있습니다.
하지만 단일 요소를 반복적으로 사용하는 것이기 때문에 당연히 비욘세 사진만 나옵니다.
따라서 재사용한 카드 구성 요소 각각에 다른 정보 조각들을 넣어주어야 합니다.

 

 

render 함수에 Card function을 불러오는 태그 내부에 임의의 속성들을 자기가 원하는 이름으로 지정하고 값을 넣어줄 수 있습니다.
저의 경우 name, img, email, number 속성을 만들어주었습니다.
이렇게 생성해준 속성들을 props 라고 정의합니다.

function Card 의 매개변수에 props 가 들어가 있는데 이것은 render 함수 에서 Card 태그로 function을 불러올 때 만들어준 모든 속성들을 매개변수로 가져와서 사용할 수 있다는 뜻입니다.
결국 render 함수에 Card function을 호출하게 될 텐데 이때 props.{만든 속성 명}을 지정해주면 해당 속성을 불러올 수 있습니다.

당연히 매개변수 명을 props 라고 굳이 할 필요는 없습니다.

따라서, 일일히 반복적으로 똑같은 코드를 작성하는 것이 아니라 동일한 기능을 단일 요소로 만들어 두고 렌더링 호출 시 호출되는 요소에 속성을 지정해준 다음 해당 props 들을 이용하면 짧은 코드양으로도 동일한 효과를 가질 수 있습니다.