상태가 없는 컴포넌트(Stateless)와 상태가 있는 컴포넌트(Statefull)

제어된 컴포넌트 vs 제어되지 않은 컴포넌트

프레젠테이셔널 컴포넌트 vs 상태 유지 컴포넌트

dumb vs smart

Stateless vs Statefull

 

📌 상태가 없는 컴포넌트 (Stateless)

const StatelessComponent = (props) => {
	return <div>{props.message}</div>;
};

• 상태(state)를 갖지 않는 컴포넌트
• props를 받아 렌더링하고 UI를 표시하는 역할
• 렌더링만 담당하므로 생명주기 메서드나 상태 변경에 따른 부가적인 작업을 수행하지 않는다.
• 리액트 훅을 사용하지 않는다.
• 단순하고 가벼워서 성능이 좋다.

 

📌 상태가 있는 컴포넌트 (Statefull)

import React, { useState, useEffect } from 'react';

const StatefulComponent = () => {
	const [count, setCount] = useState(0);

	useEffect(() => {
		// 컴포넌트가 마운트될 때와 업데이트될 때 실행되는 부수 효과
		document.title = `Count: ${count}`;
	}, [count]);

	const incrementCount = () => {
		setCount(count + 1);
	};

	return (
		<div>
			<p>Count: {count}</p>
			<button onClick={incrementCount}>Increment</button>
		</div>
	);
};

• 내부적으로 상태(state)를 가지는 컴포넌트
• useState를 사용하여 상태를 관리할 수 있다.
• useEffect를 통해 부수 효과를 처리한다.
• 리액트 훅을 사용한다.
• 복잡한 상태 논리와 상호작용이 필요한 경우에 사용한다.