리액트 컴포넌트 (22.11.16 TIL)

강의반복과제를 하던 중 아직도 클래스 컴포넌트와 함수형 컴포넌트 선언을 헷갈려 하는 것 같아서 정리하는 글!

리액트 컴포넌트란 리액트로 만들어진 앱을 이루는 최소한의 단위이다. 기존의 웹 프레임워크는 MVC방식으로 분리하여 관리하여 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있었다. 반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고 이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다.

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

1. 함수형 컴포넌트

가장 간단하게 컴포넌트를 정의하는 방법은 자바스크립트 함수를 작성하는 것이다. function 으로 정의하고 return 문에 jsx 코드를 반환한다. 이 때 함수형 컴포넌트는 function을 사용하지 않고 화살표 함수로 정의해도 된다.

import React from 'react';

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

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

//다른 방법
const MyComponent = (props) => {
    return <div>Hello, {props.name}</div>;
}

2. 클래스형 컴포넌트

class로 정의하고 render() 함수에서 jsx 코드를 반환한다. 컴포넌트 구성 요소, 리액트 생명주기를 모두 포함하고 있다. 프로퍼티, state, 생명주기 함수가 필요한 구조의 컴포넌트를 만들 때 사용한다. 클래스 컴포넌트는 함수 컴포넌트보다 약간 더 복잡하다. 함수 컴포넌트는 프로그램의 다른 컴포넌트를 인식하지 못하지만 클래스 컴포넌트는 서로 작동할 수 있다. 한 클래스 컴포넌트에서 다른 클래스 컴포넌트로 데이터를 전달할 수 있다. 

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 와 라이프 사이클 API 를 사용할 수 없다는 단점이 있었지만 현재, 훅에 의해 이 모든 문제가 해결되었다고 한다.

 

 

참고 : 

Components와 Props – React

 

React 클래스형, 함수형 컴포넌트 차이

 

Hook 자주 묻는 질문 – React