클래스형 컴포넌트

컴포넌트를 선언하는 방식은 두 가지이다.

1. 함수 컴포넌트

function App() {
  const name='heyheyhey'
  return (
    <div className="heyhey">
      {name}
      </div>
  );
}

1. 클래스형 컴포넌트

import React,{Component} from "react";
class App extends Component{
  render(){
    const name ="heyhey"
    return (
      <div>{name}</div>
    )
  }
}

클래스형 컴포넌트 장점

• state 기능 및 라이프사이클 기능을 사용할 수 있다.
• 임의 메서드를 정의 가능하다.

컴포넌트 생성

1. src/MycComponent.js 파일 생성

2. 코드 작성

   const Mycomponent = () =>{
     return <div>새로운 컴포넌트</div>
   }
   export default Mycomponent

   • function 대신에 화살표 함수를 사용

   export default Mycomponent: 모듈 내보내기

3. App.js

   import React,{Component} from "react";
   import Mycomponent from "./MyComponent";
   
   class App extends Component{
     render(){
       const name ="heyhey"
       return (
         <>
           <div>{name}</div>
           **<Mycomponent/>**
         </>
       )
     }
   }
   
   export default App;

   import Mycomponent from "./MyComponent" : 모듈 불러오기