2. props, components

앞서 클래스를 통해 사용자 지정태그를 만들어 보았다.

근데 항상 똑같은 결과만 도출 한다면 재사용성이 떨어지지는 않을까??

그래서 props를 통해 내용을 바꿀 수 있다.!!

 

class Subject extends Component {

  render() {

    return (

      <header>

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

      </header>

    );

  }

}

이렇게 Subject 클래스에서 h1의 내용안에 {this.props.title} 이라고 적어준다면

App 클래스 안에서 사용자 지정태그를 적어줄때

<Subject title="wellcome to my page"><Subject>

이렇게 적어준다면 h1 안에 title의 내용이 들어간다!!

 

근데 app.js에 여러 class를 선언해두면 보기 불편하고 또 다른 파일에서 필요할 땐 못쓰니까 불편하다..

따라서 !! 따로 폴더를 만들어서 그 곳에 정리를 해두면 된다.

 

src 안에 components라는 폴더를 만들고 그 안에

Subject.js 를 만든후

import React, { Component } from "react";

 

class Subject extends Component {

  render() {

    return (

      <header>

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

        {this.props.sub}

      </header>

    );

  }

}

 

export default Subject;

 

App.js  에서는

import Subject from "./components/Subject";

이걸 추가해주면 똑같이<Subject>를 사용할 수 있다!!

 

이렇게 함으로써 훨씬 깔끔해지고다른 파일에서도 컴포넌트를 사용할 수 있게 되었다