컴포넌트 작성 방식 (함수형? 화살표 함수?)

함수형 컴포넌트 방식

• 함수형 컴포넌트를 많이 쓴다.
• 기존의 자바스크립트 문법에 익숙한 개발자들이 쉽게 적응할 수 있는 방식이다.

function Expenses(props) {
	return (
		<div>
			{props.items.map(item => (
				<ExpenseItem
					key={item.id}
					title={item.title}
					amount={item.amount}
					date={item.date}
				/>
			))}
		</div>
	);
}

 

화살표 함수 표현식

• 화살표 함수는 간결하고 직관적인 문법을 가지고 있어 가독성이 좋고, this 바인딩에 대한 동작이 다르기 때문에 몇 가지 상황에서 유용할 수 있다.
• 개인의 취향과 프로젝트의 코드 스타일에 따라 선택하면 된다.

const Expenses = (props) => {
	return (
		<div>
			{props.items.map(item => (
				<ExpenseItem
					key={item.id}
					title={item.title}
					amount={item.amount}
					date={item.date}
				/>
			))}
		</div>
	);
}