React - Prop이란

비슷한 함수형 Component를 사용하게 됬을 때 재사용할 수 있는 방법이 없을까? 비슷한데, 각 함수형 안에 몇 가지 변수만 다르다고 생각해보자. 이럴 때는 함수형을 하나만 두고 React의 Prop이라는 특징을 이용해서 컴포넌트 재사용을 할 수 있다.

함수형 컴포넌트

모든 컴포넌트 들은 argument를 받는다. 이 인자의 이름은 Props 라고 부른다. 즉 부모 컴포넌트에서 자식컴포넌트로 전달받는 인자이다. prop은 object이기 때문에 두번째 인자가 없고 오직 하나의 인자로만 존재한다. prop의 이름도 아무거나 정해도 된다.

prop을 콘솔로 출력

출력해본결과 prop는 object형임을 알 수 있음

따라서 text의 값을 보여주고 싶다면 그저 {prop.text}를 쓰면 간단히 해결할 수 있다. 하지만 보통 shortcut을 사용해서 간단히 할 수 있다. prop은 object 이기 때문에 인자에 {text}라고 명시해놓으면 react가 알아서 해당 인자를 가져온다. 다음 그림과 같이.