[React] 컴포넌트

컴포넌트

컴포넌트를 선언하는 방식은 두가지이다. 하나는 함수 컴포넌트, 다른 하나는 클래스형 컴포넌트다.

✔ 함수 컴포넌트

import React from ‘react‘;
import ‘./App.css‘;


function App() {
  const name = ‘리액트‘;
  return <div className=“react“>{name}</div>;
}

export default App;

✔ 클래스형 컴포넌트

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

클래스형 컴포넌트와 함수형 컴포넌트의 차이

클래스형 컴포넌트의 경우

• state 기능 및 라이프사이클 기능을 사용할 수 있다는 것
• 임의 메서드를 정의할 수 있다는 것
• render 함수가 꼭 있어야 한다
• 그 안에서 보여 주어야 할 JSX를 반환해야 한다.

함수형 컴포넌트의 주요 단점은

• state와 라이프사이클 API의 사용이 불가능하다는 점

이 단점은 리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었다.

그래서 리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수형 컴포넌트와 Hooks를 사용하도록 권장하고 있다.