[React] Props

 

 

이전시간에 리액트의 컴포넌트를 만들어보았다.

이제 우리는 태그를(컴포넌트)를 다른 웹페이지나 패키지, 소프트웨어로 만들어서 다른 사람이 우리가 정의한 태그를 자신의 애플리케이션에 사용할 수 있다.

 

여기서 아쉬운 점! 

정의한 태그는 언제나 똑같은 결과를 보여준다.

우리가 알고있는 태그들 중에 예를 들어 link 태그는 a라는 것을 통해서 이것이 태그다 라는 것을 알려준다.

동시에 이 링크가 어떤 주소와 연결되는지 표현해줄 필요가 있다.

그러기 위해서는 attribute라는 것을 통해서 각각의 링크주소를 표현하고 있다.

 

이렇게 태그의 이름, 속성이라는 차이점을 통해서 재사용성이 굉장히 높은 부품을 만들 수 있다. 

 

 

어떻게??

https://ko.reactjs.org/docs/getting-started.html

시작하기 – React

리액트 공식문서에서 알 수 있다.

주요개념(Main Concepts)의 Components and Props을 읽어보았다.

 

 

🔽 리액트 문서 일부

this.props.name으로 컴포넌트 속성을 표현할 수 있다. 

 

 

 

우리는 Subject라는 컴포넌트가 실행될 때 title은 WEB이라는 속성을

그 컴포넌트가 알아내서 해당 부분에 위치시킬 수 있어야한다.

이 때 사용하기로 약속된 jsx의 기호는?? 중괄호 !

속성이라는 것이 html의 태그에서는 attribute라고 하는데 리액트에서는 props라고 한다.

원하는 값의 이름을 넣어준다.

 

 

 

결과는 역시 이전과 동일하다. 하지만 내부적으로는 훨씬 효율적이게 되었다.

이것을 리팩토링했다고 한다.

 

 

 

title, sub 값을 바꿔주게 되면 이 값들이 Subject라고 하는 컴포넌트의 입력값이 되어 이에 따라서 달라지는 출력값을 화면에 표시한다.

 

 

Content 부분도 바꿔보았다.

 

 

 

🛠 React Developer Tools

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=ko 

React Developer Tools

 

크롬에 설치를 하면 실습을 해볼 수 있다.

설치를 했으면 개발자 도구 탭에서 React가 추가되어있다.

이걸 누르면 우리가 만든 앱의 컴포넌트를 보여준다.

 

 

강의에서 말한 것과 같은 탭이 안보여서 Components를 열었더니 이렇게 보였다.