[React] Components의 종류(선언형/클래스형) 및 사용법

Component 란 ?

리액트로 만들어진 앱을 이루는 최소한의 단위로, 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수 또는 클래스

👉🏻 'props'라고 하는 인자를 받은 후, 화면에 어떻게 표시되는지를 기술하는 React Element를 반환

 

기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었습니다.

반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있습니다.

 

React에서는 소문자로 시작하는 컴포넌트를 DOM 태그로 인식하기 때문에 컴포넌트 이름은 항상 대문자로 시작해야 합니다 ⭐️⭐️

 

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 관리할 수 있습니다.

출저 : React 공식문서

 

리액트에서 정의하는 컴포넌트 종류는 크게 함수형 컴포넌트, 클래스형 컴포넌트 2가지가 있습니다.

 

1) 함수형 컴포넌트 (Stateless Functional Component)

import React from 'react';

function MyComponent(props) {
	return <div>Hello, {props.name}</div>;
}

//다른 JS파일에서 불러올 수 있도록 내보내주기(MyComponent 파일을 다른 파일에서 import 할때 MyComponent로 불러올 수 있도록 정의해 주는 부분)
export default MyComponent;

가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것 입니다.

 

이 함수는 데이터를 가진 하나의 props(속성을 나타내는 데이터) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트입니다.

 

이러한 컴포넌트는 JavaScript 함수이기 때문에 말 그대로 “함수 컴포넌트”라고 호칭합니다.

 

💡 Reactjs Code Snippets를 설치했다면 rsf (React Stateless Functional Component)를 치면 편하게 생성할 수 있다. 

 

2) 클래스형 컴포넌트 ( Class Component )

import React from 'react';

class MyComponent extends React.Component {
	constructor(props) { // 생성함수
		super(props);
	}
	
	componentDidMount() { // 상속받은 생명주기 함수
	}
	
	render() { // 상속받은 화면 출력 함수, 클래스형 컴포넌트는 render() 필수
		return <div>Hello, {this.props.name}</div>;
	}
}

export default MyComponent; //다른 JS파일에서 불러올 수 있도록 내보내주기

컴포넌트 구성 요소 및 리액트 생명주기를 모두 포함하고 있으며 프로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용합니다.

 

💡 Reactjs Code Snippets를 설치했다면 rcc (React Class Component)를 치면 편하게 생성할 수 있다. 

 

컴포넌트 렌더링

이전까지는 DOM 태그만을 사용해 React 엘리먼트를 나타냈습니다.

const element = <div />;

 

React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있습니다.

const element = <Welcome name="Sara" />;

 

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 "단일 객체"로 전달합니다. 이 객체를 props라고 합니다. ⭐️⭐️⭐️

(props는 읽기 전용이기 때문에 함수 컴포넌트와 클래스 컴포넌트 모두 props를 자체적으로 수정할 수 없습니다. 즉, React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다는 규칙이 있습니다.)

 

컴포넌트 합성

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있습니다. 이는 모든 세부 단계에서 동일한 추상 컴포넌트를 사용할 수 있음을 의미합니다.

React 앱에서는 버튼, 폼, 다이얼로그, 화면 등의 모든 것들이 흔히 컴포넌트로 표현됩니다.