Component를 알아보자

Component

컴포넌트는 리액트의 기본 단위이며 리액트로 만든 웹 앱은 다수의 컴포넌트가 모여 만들어진다

컴포넌트로 나눌 때 가장 이상적인 형태는 컴포넌트가 하나가 하나의 기능을 하게 하는 것. 즉, 단일 책임 원칙이라는 테크닉을 지켜 나누는 것이 좋다

생성

컴포넌트를 생성하는 방법은 클래스형, 함수형 총 두가지로 간단히 알아보자

클래스형

클래스형은 class 키워드를 통하여 생성하며 React.Component를 확장하여 사용한다 필수적으로 render()함수를 포함해야한다

import React from 'react';

class MyComponent extends React.Component {
    render() {
      return <h1>내 첫 컴포넌트</h1>;
    }
}

export defalut MyComponent;

• React를 import하여 React.Component를 클래스에 확장시킨다
• render()는 필수적으로 포함하여야하며 안에 return(JSX구문)을 작성하면 된다
• export default로 생성한 클래스형 컴포넌트를 내보낸다

함수형

함수형 컴포넌트는 function 또는 화살표 함수를 통하여 생성한다

// 기본
function myComponent() {
    return <h1>내 첫 컴포넌트</h1>;
}

// 화살표
const myComponent = () => {
    return <h1>내 첫 컴포넌트</h1>;
}

• 여기서 기본 함수형의 this는 자신이 종속된 객체를 가르키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다

무엇이 더 좋나요?

둘의 역할은 같지만 함수형이 선언하기 편하고, 메모리 자원을 덜 사용한다는 장점이 있다
원래는 클래스형만 state를 사용할 수 있었지만, 리액트 훅(hook)을 지원하면서 부터 함수형에서도 state를 사용할 수 있게 되어 현재는 공식문서에서 함수형으로 컴포넌트를 작성하길 권장하고 있다

하지만 프로젝트, 환경에 따라 다를 수 있는 부분임으로 둘 다 다룰 수 있도록 공부하자