ch01.클래스형 컴포넌트

클래스형 컴포넌트

• 컴포넌트를 선언하는 방식은 함수형과 클래스형 2가지가 있다.
• 클래스형 컴포넌트의 경우 state 기능 및 라이프 사이클 기능을 사용할 수 있다.
• 임의 메소드를 정의할 수 있다.
• ES6이전에는 자바 스크립트에 Class가 없었다. -> prototype문법을 이용했다
• render함수가 반드시 있어야 되고 그 안에서 보여줘야 될 JSX를 반환하여야 된다.
• 장점 : state와 라이프 사이클 API의 사용이 가능하다. -> 함수형 컴포넌트도 리액트 16.8v 이 나오면서 해결
• 단점 : 선언이 어렵다, 메모리 자원이 함수형 컴포넌트보다 크다.

import React, {Component} from 'react';

class  App extends Component{
   render(){
    const name = 'react';
     return <div className='react'>{name}</div>
   }
}
export default App;

첫 컴포넌트 생성

• src 디렉터리에 MyComponent.js 파일 생성
• 일반 함수의 경우 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다.
• Reactjs code Snippet을 사용하면 간단하게 컴포넌트 코드를 생성할 수 있다.
  • rsc 입력 후 엔터 
  • 클래스형 컴포넌트 생성 시 rcc 엔터

• 컴포넌트 </div> from 'react';
  const MyComponent = () => { //function 대신 화살표 함수 문법 사용
  
       return  <div>나의 새롭고 멋집 컴포넌트</div>
  };
  export default MyComponent;

모듈 내보내기 / 불러오기

• 모듈 내보내기 : export default MyComponent; 
  • 다른 파일에서 이 파일을 import 할 때 위에서 선언한 MyComponent 클래스를 불러오도록 설정한다.
• 모듈 불러오기 : import MyComponent from './MyComponent';
  • import 구문을 사용하여 우리가 만든 MyComponent를 불러온다.

• import React from 'react';
  import MyComponent from './MyComponent';
  const App = () =>{
     return <MyComponent name='React'/>;
  }