[React] 3장. 컴포넌트(Component)-함수형, 클래스형

📍 컴포넌트(Component)란?
리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용하는데, 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있다

컴포넌트는 새로운 컴포넌트를 생성할 수도 있고, MVC의 뷰를 독립적으로 구성해 재사용할 수도 있다.

리액트는 컴포넌트(Component) 기반의 구조적 특징을 가지고 있다. 컴포넌트는 리액트의 중요한 핵심이며, 이러한 컴포넌트를 선언하는 방식은 두 가지가 있다. 바로 함수형 컴포넌트, 클래스형 컴포넌트이다.

• 컴포넌트(Component) 구성 요소

  1) property(props) 
  부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터로 프로퍼티 값은 자식 컴포넌트에서 수정할 수 없다.

  2) state
  컴포넌트의 상태를 저장하고 수정 가능한 데이터

  3) context 
  부모 컴포넌트에서 생성해 모든 자식 컴포넌트에게 전달하는 데이터

  
  

// 함수형 컴포넌트
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 기능 및 라이프사이클 기능을 사용할 수 있음.
👉 임의 메서드를 정의할 수 있음.

• 함수형 컴포넌트 예시

// main.jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

// App.jsx
import './App.css'
import MyComponent from './MyComponent';

function App() {
  const name = undefined;

  return (
    <>
      <div>
        {name || '리액트'}
        <MyComponent />
      </div>
 
    </>
  );
  
   
}

export default App

// MyComponent.jsx
const MyComponent = () => {
    return <div>나의 새롭고 멋진 컴포넌트</div>;
}

export default MyComponent
 

---

👉 클래스형 컴포넌트

• render 함수가 꼭 있어야 하고, 그 안에서 보여 줘야 할 JSX를 반환해야 함.

리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수형 컴포넌트와 Hooks를 사용하도록 권장하고 있다. 하지만 그렇다고 해서 클래스형 컴포넌트가 사라지는 것은 아님! 그렇기에 클래스형 컴포넌트의 기능도 알아두고 있어야 한다.

❓🤔 그렇다면 어떨 때 함수형 컴포넌트를 사용해야 할까?

1. 함수형 컴포넌트의 장점

• 클래스형 컴포넌트보다 선언하기가 훨씬 편함.
• 메모리 자원도 클래스형 컴포넌트보다 덜 사용함.
• 배포할 때도 함수형 컴포넌트를 사용한 결과물의 파일 크기가 더 작음.
  
  

2. 함수형 컴포넌트의 단점

• tate와 라이프사이클 API의 사용이 불가능했음.
  리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결됨. 완전히 클래스형 컴포넌트와 똑같이 사용할 수 있는 건 아니고, 조금 다른 방식으로 비슷한 작업을 할 수 있게 됨.