[리액트] props

어떤 태그를 패키지로 만들어서 인터넷에 올리면 다른 사람들이 내가 정의한 태그를 자신의 앱에 붙여 사용할 수 있다.

3대 빌드 도구 (번들링 도구)
- maven
- gradle
- Ant
빌드 도구의 역할(:묶는 역할)을 VSCode에서는 Web phk (웹 픽)이 한다.

바벨 : 스크립트 태그 
JSX를 자바스크립트 코드로 반환시켜준다.

node.js 는 웹브라우저가 할 수 없는 기능을 제공한다.
1. 웹 서버의 역할 (Tomcat 없이 가능)
2. 번들링이 잘 되도록 관여하는 역할

 

App.js 에 <Subject> 를 하나 더 추가하면 똑같은 내용이 두 번 반복한다.

문제는 현재의 Subject 라는 컴포넌트는 언제나 똑같은 결과만 보여줄 수 있다.

 

<App.js>

P.60 두번째 코드 참고!

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

속성값을 붙인 Subject 컴포넌트이다.

우리가 만든 컴포넌트에 HTML의 태그 이름, 속성값을 사용하는 것과 같은 원리로 속성값을 붙여서

컴포넌트를 다르게 보이게 만들 수 있을까?

 

컴포넌트를 다르게 만드는 방법이다.

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

Components and Props – React

 

 

컴포넌트의 속성을 이용해 Subject 컴포넌트의 title 이라는 속성에 "WEB"이라는 값을 지정하면 그 값을

Subject 컴포넌트 내의 <h1> 태그에 넣는 코드를 작성해보겠다.

<App.js> 

P.61 예제 12-2 코드 참조!

class Subject extends Component {
 ... 생략 ...
    <h1> {this.props.title} </h1>
    <p> {this.props.sub} </p>
... 생략 ...    
}

class App extends Component {
... 생략 ....
	<Subject title="WEB" sub="world wide web!"></Subject>
... 생략 ....
}

 

 

실행 결과는 같지만 내부적으로는 이 코드가 훨씬 효율적이다.

 

코드를 살펴보면 <h1> 태그 내의 중괄호 {}는 자바스크립트 코드가 아니고 JSX 문법이다.

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

this 뒤에 있는 props는 리액트에서 속성값을 나타내는 키워드이다.

props 뒤 title에 원하는 값을 사용하면 된다. (title = 속성명으로 속성값을 가져온다)

 

Subject 컴포넌트의 attribute를 title로 썼기 때문에 props 뒤에도 title을 사용하는 것이다.

 

왜 위의 코드가 더 효율적일까?

Subject 컴포넌트는 원래 언제나 똑같은 값을 보여주는 컴포넌트 였는데,

다음과 같이 title 과 sub를 바꿔서 작성하면

이 title의 값과 sub의 값이 Subject 라는 컴포넌트의 전달값이 되어서 그에 따라 달라지는 출력값을 화면에 표시한다.

 

나중에는 사용자가 지정한 값을 Component 에 지정할 수 있다.

 

<App.js>

P.63 예제 12-3 참조!!

...생략...
class App extends Component {
...생략...
	<Subject title="WEB" sub="world wide web!"></Subject>
    <Subject title="React" sub="For UI"></Subject>
...생략...
}

결과를 확인 하면 코드가 추가된 것을 볼 수 있다.

※ 상위 컴포넌트(APP)에서는 하위 컴포넌트를 사용할 수 있는데, 사용자 정의 태그(JSX)로 재사용이 가능하지만 데이터는 변경할 수 없다!

 

이렇게 해서 완벽하게 동작하는 사용자 정의 태그를 만들 수 있게 되었다.

 

코드를 저장하고 결과를 보면 똑같이 동작하지만, props 값을 받아서 그것을 바탕으로 서로 다른 결과를 만들어내는 훨씬 더 똑똑한 컴포넌트를 만들 수 있게 되었다.