[React] Props

📌 Props 사용

---

컴포넌트를 만들게 되면 다른 웹 페이지나, 패키지등으로 만들어 인터넷에 올리면 다른 사람들이 자신의 애플리케이션에 붙혀서 사용할 수 있게 되는 것이에요.

위에서 만든 컴포넌트 Tag를 똑같은 걸 하나 더 만들면 동일한 것이 두 개 출력된답니다.
하지만, 동일한 것만 출력할 수 있는 것이 아쉬운 것이에요.

React 컴포넌트도 html 속성처럼 속성값을 넣을 수 있답니다. 

 

 

 

위와 같은 소스코드에서 Subject Tag에 속성값을 남기려면

 

<Subject title="WEB" sub="world wide web!"></Subject>

 

했을 때, sub는 부 제목

 

 

 

여기서 <h1>에 아래와 같이 하면

<h1>{this.props.title}</h1> 
{this.props.sub}

 

이 전에 출력된 것과 똑같이 출력되면서 간결해진 것이에요. 이를 바로 리팩터링 했다고 표현 한답니다.

 

 

---

 

주니하랑의 글이 마음에 드셨나요? 구독과 공감! 그리고, 댓글 그리고 방명록은 주니하랑에게 많은 힘이 됩니다