React Props 이해하기

Props

 

만약 어떤 물건을 주문제작하려고 하는 상황을 가정해보겠습니다. 그렇다면 내가 원하는 특별한 스펙들이 존재할테고, 물건을 만들어 주는 업체에서는 그러한 스펙을 전달 받아야만 그에 맞게 물건을 주문제작을 해줄 수 있습니다.

 

위의 예시에서 스펙에 해당하는 것을 리액트의 Props라고 생각하면 좋습니다. 사용하고자 하는 곳에서 스펙을 Props로 전달하면 제작하는 곳에서는 Props에 담긴 정보들을 이용해 사용자가 원하는 결과물을 전달해주기 때문입니다.

 

Welcome이라는 함수 컴포넌트가 h1태그를 만들어줍니다.(화면에 렌더링 해준다는 의미입니다)

그런데 주문제작을 해줍니다. 사용자가 주는 정보를 받아서 (props와 children) 무엇을 전달받느냐에 따라 다른 물건을 만들어줍니다. 

 

APP 함수안에서 Welcome 컴포넌트를 리턴하고 있습니다.

여기가 사용자가 업체에 주문을 하는행위라고 생각하시면 됩니다. Welcome컴포넌트가 화면에 렌더링되기를 요청하는 것이죠. 그런데 자신이 원하는 특별한 정보를 보여주면서 렌더링 되기를 원합니다. 그래서 name과 반갑습니다로 그 정보들을 전달하고 있습니다. 그리고 이러한 정보가 Props입니다.

 

Props를 cosole.log를 사용하여 로그를 찍어보면 아래처럼 나옵니다.

 

Welcome컴포넌트를 사용(혹은 호출)하는 쪽에서 넘기는 정보들이 그대로 객체 형태로 함수 내부로 전달되고 있습니다. 그리고 짜여진 형틀에 사용자가 원하는 재료를 첨가하여 리턴을 해주는겁니다.

 

추가로 컴포넌트 태그 안에 들어가는 컨텐츠는 Props의 children이라는 key에 value로 전달되는 특징이 있습니다.

 

 

# 리액트 공식문서를 참조하였습니다.

잘못된 정보는 댓글로 수정해주시면 감사하겠습니다 !

https://ko.reactjs.org/docs/components-and-props.html

Components와 Props – React