4. 한 js에서 컴포넌트 2개

import { Component } from "react";

class Counter extends Component {

  constructor(props){

    super(props);

    this.state = {

      number : 1

    }

  }

  render() {

    return (

      <>

        <h2>사용 상품 수량 </h2>

        <h3>수량 : {this.state.number}</h3>

        <button>+1</button>

        <button>-1</button>

      </>

     );

  }

}

 

class ClassComp extends Component {

  render() {

    return (

      <>

        <h1>클래스형 컴포넌트</h1>

        <Counter></Counter>

      </>

    );

  }

}

export default ClassComp;

뭐랄까 1회용? 딱 그냥 여기서만 이 컴포넌트 쓰겠다, 짝꿍이다 하면 분리하지 말고 이렇게 하는 것도 괜찮을 듯.

 

그냥 똑같이 호출하면 됨. 

예를 들자면 import가 저 Counter를 가져오는 그런 느낌인데,

이미 안에 있으니 걍 쓰는 거.

걍 쓰면 됨.