[React.js] Component란 무엇일까?

컴포넌트란 무엇인가...

되게 추상적으로 머리에는 그려지는데 설명을 못하겠다!

 

근데 React 컴포넌트랑 프로그래밍 측면에서 컴포넌트가 좀 다른 점이 있는것 같다 ..!

그래서 한번 자세히 알아보자!!

 

먼저 컴포넌트란?

- 프로그래밍에 있어서 컴포넌트란 재사용이 가능한 각각의 독립된 모듈을 뜻한다.

       ( 교체 가능한 부품 )

- 컴포넌트 개념을 잘 적용한 소프트웨어란 부품(인터페이스를 구현받는 클래스)만 바꾸어주었을 시 오류없이 잘 작동되는 것을 의미한다.

컴포넌트는 구현, 명세화, 패키지화, 그리고 배포 될 수 있어야한다.

1. 소스코드(soure code)가 아닌 실행코드(execute code) 기반으로 재사용할 수 있도록 이미 구현(implemetntation)이 완료되어 있어야만 한다.
2.컴포넌트는 해당 컴포넌트의 용도, 유형, 기술표준과 인터페이스등에 대한 정보들에 대해서 명세화(specification)되어 있어야만 한다.
3. 교체가능한 컴포넌트를 개발하기 위해서는 표준(standard)을 준수하여 개발해야한다.
4. 컴포넌트가 개발되어 배포될 때 관련 문서와 코드들이 독립적인 단위로 패키지화(packaing)되어 있어야만 한다.5. 컴포넌트는 독립적인 업무단위로 개발된 것이므로 사용자가 필요한 기능만을 패키지한 컴포넌트를 재사용할 수 있도록 독립적으로 배포(deployment) 가능해야만 한다.

- 유저가 사용하는 시스템에 대한 조작장치를 말한다. 통상 컨트롤(Control)이라고도 하고 UI 라고도 한다.

 

 

리액트 컴포넌트란?

- 리액트로 만들어진 앱을 이루는 최소한의 단위

- 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고, 새로운 컴포넌트를 쉽게 만들 수 있음.

(기존의 웹프레인워크는 MVC방식으로 분리하여 관리를 하기 때문에 각 요소의 의존성이 높아서 재활용이 어렵다는 단점이 있었다.)

- 컴포넌트는 데이터(props)를 입력받아서 View(state) 상태에 따라 DOM Node를 출력하는 함수.

- 컴포넌트 이름은 항상 대문자로 시작해야함.

(리액트는 소문자로 시작하는 컴포넌트를 DOM태그로 취급하기 때문)

- UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩한다.

- "props"라고 하는 임의의 입력을 받은 후, 화면에서 어떻게 표시되는지를 기술하는 React Element를 반환함

 

 

 

리액트에서 정의되는 컴포넌트의 종류

- 함수영 컴포넌트

import React from 'react';

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

export default MyComponent;

- 클래스형 컴포넌트

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;

 

 

 

 

결론

내가 생각하는 컴포넌트는 진짜 간단하게 이야기하면

"재사용가능한 블록"인것 같다!

 

 

 

 

 

⭐ 컴포넌트란?

https://hanamon.kr/%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-component%EB%9E%80/

 

⭐ React 컴포넌트란?

https://goddaehee.tistory.com/299