React의 Component를 알아보자

1️⃣ Component란?

‘웹 페이지를 만드는 퍼즐 조각’ 입니다.

개발자는 컴포넌트 조각을 설계하고 만든 컴포넌트를 조합해서 사용자 인터페이스(UI)를 구축합니다.

자바스크립트의 함수가 특정값을 반환하는 것처럼 컴포넌트는 자바스크립트의 함수처럼 작동해서 리액트 엘리먼트를 반환합니다. 어떤 데이터 집합을 사용하든 같은 컴포넌트를 사용하면 모두 동일한 DOM 구조가 반환됩니다. 따라서 같은 컴포넌트를 사용해 동일한 DOM 구조를 지닌 인스턴스를 원하는 개수만큼 만들 수 있습니다.

 

---

 

2️⃣ 함수형 컴포넌트

function으로 정의하고 return문에 jsx 코드를 반환.

import React from 'react';
import "./App.css";

function TodoList() {
	const name = "study";
	return <div>{name}></div>;
}

export default TodoList();

이 때 function을 사용하지 않고 화살표 함수로 정의해도 됩니다.

 

import React from 'react';
import "./App.css";

const TodoList = () => {         // function을 const로 바꾸고 화살표 함수 사용
	const name = "study";
	return <div>{name}></div>;
}

export default TodoList();

• export는 다른 파일에서 TodoList 파일을 import 해올 때 불러올 수 있도록 정의해 주는 부분 입니다.
• App.js에서 불러오는 예시

import React from 'react';
import "./App.css";
import TodoList from "./TodoList";      // 컴포넌트 불러오기

function App() {
	return <TodoList />;
}

export default App;

 

---

 

3️⃣ 클래스형 컴포넌트

class로 정의하고 render() 함수에서 jsx 코드를 반환.

import React, { Component } from "react";

class TodoList extends Component {
	render() {
		const name = "study";
		return <div className="react">{name}</div>;       // class가 아닌 className
	}
}

export default TodoList;

class가 아닌 className으로 작성해주어야 한다는 것을 주의해야 합니다.

클래스형 컴포넌트에서는 state(상태)를 사용할 수 있으며 각종 라이프사이클 및 메서드를 이용하여 컴포넌트가 마운트 혹은 언마운트 될 때 추가 작업을 수행시키는 등 조작을 할 수 있었습니다.

하지만 Hook이 등장한 이후부터는 위 기능들을 함수형 컴포넌트에서도 대부분 구현이 가능하게 되었습니다.

결과적으로 react에서 제시하는 hook과 관련된 개요와 그 방법을 확인하시면 좋습니다.(공식 문서)