0. 컴포넌트
React는 UI를 작고 이해하기 쉬운 컴포넌트 단위로 나눠 프로젝트를 구조화한다 (Structure).
기능별로 나눈 컴포넌트는 재사용성(Reusability)이 높고,
복잡한 로직이 있더라도 외부에서는 단순한 이름으로 사용할 수 있어 추상화(Abstraction)에 유리하다.
이로 인해 개발자는 전체 흐름에 집중할 수 있고,
UI가 변경될 경우 해당 컴포넌트만 수정하면 되므로 유지보수(Maintainability)가 쉬워지고 안정성도 높아진다.
React 에는 두 가지 종류의 컴포넌트가 있다. 클래스 컴포넌트와 함수형 컴포넌트이다.
두 컴포넌트는 동일한 작업을 수행할 수 있지만, 구문과 특정 기능 사용 방법에 차이가 있다.
import React from 'react';
import { createRoot } from "react-dom/client";
import './index.css';
import Hello from './Hello';
import 'tachyons';
const root = createRoot(document.getElementById('root'));
const element = <Hello greeting="Hello React King" />; // props 전달
root.render(element);
1. 클래스 컴포넌트
import React, { Component } from 'react';
import './Hello.css'
class Hello extends Component {
render() {
return (
<div className='f1 tc'>
<h1>Hello World</h1>
<p>{this.props.greeting}</p>
</div>
)
}
}
export default Hello;
클래스 컴포넌트는 주로 래거시 프로젝트에서 볼 수 있는 방식이다.
클래스 컴포넌트는 생명주기(Lifecycle) 메서드를 지원하지만,
복잡하고 직관적이지 않으며 안전하지 않아서 향후 React 버전에서 지원되지 않을 예정이다.
또한, 일반적으로 Hooks 를 사용할 수 없다.
2. 함수형 컴포넌트
import React from 'react';
import './Hello.css'
const Hello = (props) => {
return (
<div className='f1 tc'>
<h1>Hello World</h1>
<p>{props.greeting}</p>
</div>
)
}
export default Hello;
함수형 컴포넌트는 현재 가장 많이 사용되는 방식이다.
문법이 간단하고 작성하기 쉬워서 빠르게 개발할 수 있으며,
useState, useEffect, useContext 등의 Hooks 를 사용할 수 있는 유일한 방식이다.
함수형 컴포넌트 + Hooks 조합이 현재 React 개발의 표준이라고 볼 수 있다.