React 3. Props

이렇게 Component들을 활용하면,
다른 페이지에서 자유롭게 사용가능하며,
package화해서 소프트웨어처럼 사용할 수도 있다.

✔ 문제는 한 Component의 결과물이 항상 같다는 것이다.

기존의 html tag는 태그의 이름이라는 공통성 + 태그의 속성(attribute)라는 차별성을 통해 재사용을 높이는 장점을 가지고 있다.

👉 React에 적용

• React에서도 속성 값을 활용하면 좋을 것 같다!
  이렇게 해서 나온것이 바로 "props"라는 개념이다. html tag에서 attribute와 동일한 기능을 가진다. 용어의 혼동을 막기 위해서 react에서는 "props"를 사용한다. 📄 공식문서 바로가기
  <Subject>를 활용하기 위해 속성값 "title"과 "sub"를 부여하고, class 내부에 "props"를 활용해서 이 속성값을 대입한다!

  { this.props.속성명}

subject의 속성값이 컴포넌트의 입력값이 되어 그에 따라 달라지는 출력값을 화면에 표시할 수 있게 된다.

Subject의 title속성과 sub 속성을 변경해서 출력한 모습이다.

이렇게 속성값 조절로도 자유롭게 사용할 수 있다!

생활코딩 예제 참고

import { Component } from 'react';
import './App.css';

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

class TOC extends Component {
  render(){
    return(
      <nav>
      <ul>
          <li><a href="1.html">HTML</a></li>
          <li><a href="2.html">CSS</a></li>
          <li><a href="3.html">JavaScript</a></li>
      </ul>
  </nav>
    );
  }
}

class Content extends Component {
  render(){
    return(
      <article>
      <h2>{this.props.title}</h2>
      {this.props.desc}
  </article>
    );
  }
}



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 title="HTML" desc="Html IS hyperText Markup Language."></Content>
      </div>
    );
  }
}
export default App;