[React] Component

Component

컴포넌트는 React에서 UI를 구성하는 기본 단위로 UI를 재사용 가능한 코드블록으로 나누어 설계하는 데 사용한다.

컴포넌트 구성

1 Props(속성)
부모 컴포넌트에서 자식 컴포넌트로 전달되는 읽기 전용 데이터이다. 자식컴포넌트에서 변경할 수없다.
2 State(상태)
컴포넌트 내에서 관리되는 동적 데이터로 상태가 변경되면 리액트가 자동으로 UI를 업데이트 한다.
3 Render
컴포넌트가 화면에 표시될 UI를 반환한다.
Render함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링 된다.
렌더링 작업이 끝나면 HTML마크업을 만들어 DOM요소에 삽입한다.

컴포넌트 종류

컴포넌트는 함수 컴포넌트와 클래스 컴포넌트 두 종류가 있다.

//함수 컴포넌트
function App(){
	return (...)
}

const App = () =>{
	return (...)
}

//클래스 컴포넌트
import React,{ Component } from "react";

class App extends Component{
	//render 함수는 반드시 있어야 한다.
  	render(){
    	return (...)
    }
}

클래스 컴포넌트 vs 함수 컴포넌트
1. 클래스 컴포넌트는 인스턴스를 생성하기 때문에 함수 컴포넌트보다 메모리를 더 사용한다. 하지만 미미한 차이이므로 신경쓰지 않아도 된다.
2. 함수 컴포넌트는 state를 사용하지 못한다는 단점이 있었지만 Hooks를 도입하고 나서 해결하였다.