[빡공단 41기] 7일차 함수형 컴포넌트 / 클래스형 컴포넌트

앞에 일차들은 VScode 설치와 같은 간단한 수업이여서 스킵했습니다 !

 

 

클래스형 컴포넌트의 경우 JavaScript의 클래스 개념을 이용한다.

 

React.Component를 상속받는 클래스형 컴포넌트 예시 코드

import React from "react";

class App extends React.Component {
  render() {
    return <h1>Hello</h1>;
  }
}
export default App;

 

클래스형 컴포넌트를 사용할 때는 반드시 render 함수가 정의되어야 한다.

render는 반드시 JSX를 return하는 부분을 포함하고 있어야 한다.

 

 

함수형 컴포넌트는 function 키워드와 함수명, JSX를 return하는 부분으로 구성되어 있다.

function App() {
  return <h1>Hello</h1>;
}

export default App;

 

클래스형에 비해 코드가 훨씬 간결하고, 직관적으로 구성된다.

최신 리액트에서는 클래스형은 복잡하기 때문에 더이상 사용하지 않는다.