[React] props 사용하기

src > App.js

 class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject></Subject>
        <Subject></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
   );
  }
 }

 export default App;

지난 글에서 복사해온 코드의 일부이다.
return()의 안쪽을 보면 <Subject> 태그가 두 개인데,
화면상에서도 Subject가 가리키고 있는 내용이 두 번 출력될 것이다.
그러면 Subject라는 이름은 단 하나의 같은 내용만 가리키기 때문에 사용성이 좋지 않다.
props를 이용하여 이 문제점을 개선 할 수 있다.

 

props의 이해
우리가 평소에 잘 사용하고 있는 HTML 태그를 보면,
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
같은 div인데 div를 각각 다르게 편리하게 쓸 수 있는 이유는
속성으로 각각 다른 이름을 주었기 때문이다. 
props는 속성(attribute)의 다른 이름이라고 생각하면 된다.


props 사용방법

 import { render } from '@testing-library/react';
 import React, { Component } from 'react';
 import './App.css'; 

 class Subject extends Component {
  render() {
    return (
      <header>
        <h1>{this.props.title}</h1>
        {this.props.sub}
      </header>
    );
  }
 }
 
...중략

 class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="WEB" sub="world wide web!"></Subject>
        // <Subject title="React" sub="for UI"></Subject>
        <TOC></TOC>
        <Content></Content>
      </div>
   );
  }
 }

 export default App;

순서
1. 우선 App 컴포넌트 안의 Subject태그에 props(=attribute) 이름과 값을 넣어준다.
2. Subject 컴포넌트 안의 내용의 자리에 {this.props.props이름}을 적는다.
=> 이 과정은 Subject 컴포넌트의 내용이 App의 속성에 써있다고 가리키는 형태가 된다. 여기서 중요한 점은, 이렇게 만든 덕분에 App의 속성 내용에 같은 Subject 태그를 써주어도 title과 sub 내용이 달라서 위에 this.props.title, this.props.sub라고 한 번 만 써줘도 다른 내용이 두번 나오는 효과가 생긴다. Content도 변경해주자.