React: Component

1. 컴포넌트(Component)

재사용이 가능한 각각의 작고 독립적인 모듈.

리액트로 개발한 앱을 이루는 가장 작은 단위, 조각.

 

레고블럭으로 비유할 때, 레고블럭으로 만든 집은 리액트 앱으로 보고

집을 구성하는 하나의 작은 블록들은 컴포넌트라고 할 수 있음.

 

 

1) 왜 컴포넌트인가

기존 웹 프레임워크는 MVC(Model, View, Controller) 방식으로 분리하여 관리.

따라서 각 요소들이 독립적이지 않고 의존성이 높아서 재사용이 어려움.

→ 컴포넌트는 View를 독립적으로 구성하여 재사용 가능!

 

 

2) 컴포넌트 사용

컴포넌트의 이름은 항상 대문자로 시작.

※ React에서 소문자로 시작하는 컴포넌트는 DOM 태그로 인식함.

 

 

🌟 컴포넌트의 구성요소

 

• 프로퍼티(Props)
• state
• 컨텍스트(Context)

 

 

2. 컴포넌트의 선언방식

 

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

• state와 LifeCycle API 사용이 불가능했으나 Hook 기능으로 사용 가능 .
• 클래스형 컴포넌트보다 선언하기 편함.
• 클래스형 컴포넌트보다 메모리 자원을 덜 사용함

(1) 함수형 컴포넌트 선언

import React from 'react';

const App = () => {
	return(
    	<div></div>
    );
}

export default App;

 

 

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

• state와 LifeCycle API 사용 가능.
• 임의 메서드 정의 가능. 

 

(1) 클래스형 컴포넌트 선언

• class 키워드 필요
• Component를 상속 받아야 함.
• render() 메소드 반드시 필요.

import React, { Component } from 'react';

class App extends Component {
	render() {
    	    return(
        	<div></div>
            );
    }
}

export default App;

※ 클래스 컴포넌트로 개발을 진행한 프로젝트의 유지보수를 위해 알아둘 것