[React] props 활용해 보기

컴포넌트의 props 개념에 대해서 알아보자.

props는 properties의 줄임말으로써 속성이라는 뜻을 가지고 있습니다.

어떠한 값을 컴포넌트에게 전달해줘야 할 때 props를 사용합니다.

 

App.js

 

Subject 클래스안에 props를 활용하여 App 클래스의 title 정보와 sub 정보를 가져올수 있다.

방법은 하단과 같이

{this.props.title}
{this.props.sub}

 

 

소스를 활용하여 WEB과 world wide Web!의 정보를 가져올 수 있다.

 

또한 Subject클래스를 두번 가져와 정보값을 달리 주어 정보를 다르게 보여줄 수 있다.

 

props를 활용하지 않아도 화면에 보여주는 것은 이상이 없지만 props를 활용함으로써 가독성이 좋아지며 추후에 유지보수가 편합니다. 즉 리팩토링 효과를 가져다 줄 수 있다.