[React] Component

Component 구성

리액트를 사용하여 애플리케이션의 인터페이스를 설계할 때 사용자가 볼 수 있는 요소는 여러가지 컴포넌트로 구성되어 있습니다.

 

클래스형 컴포넌트

 

Component를 선언하는 방식 2가지 : 함수형 컴포넌트, 클래스형 컴포넌트

 

함수형 컴포넌트

클래스형 컴포넌트보다 선언하기가 훨씬 편합니다.

메모리 자원도 클래스형 컴포넌트보다 덜 사용합니다.

빌드한 후 배포할 때도 결과물의 파일 크기가 더 작습니다. (함수형 컴포넌트와 클래스형 컴포넌트는 성능과 파일 크기 면에서 사실상 별 차이가 없다.)

 

단점: state의 라이프사이클 API의 사용이 불가능하다는 점. (리액트 v16.8 업데이트 이후 Hooks라는 기능이 도입되면서 해결되었습니다.)

// 함수형 컴포넌트
import React from 'react';

function App() {
	const name = '리액트';
    return <div>{name}</div>
}

export default App;

클래스형 컴포넌트

render 함수가 꼭 있어야 하며, 그 안에 보여 주어야 할 JSX를 반환해야 합니다.

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

class App extends Component {
	render() {
    	const name = '리액트'
        return <div>{name}</div>
    }
}

export default App;

두 컴포넌트의 차이점

- 클래스형 컴포넌트의 경우 이후 배울 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것

- 임의 메서드를 정의할 수 있다는 것.