1. 컴포넌트(Component) 란 ?

컴포넌트는 독립적이고, 재사용 가능하며, 특정 기능을 수행하는 소프트웨어 모듈을 나타냅니다. 이들은 시스템의 한 부분을 구성하며, 각 컴포넌트는 다른 컴포넌트와 상호 작용하여 전체 시스템의 기능을 구현합니다.

리액트의 컴포넌트는 자바스크립트 클래스 또는 함수로 정의되며, 각 컴포넌트는 한 개의 UI 부분을 나타냅니다. 이 컴포넌트들은 독립적이며 재사용 가능하며, **상태(state)와 프로퍼티(props)**를 가질 수 있습니다.

컴포넌트 생성하기

아래 App 컴포넌트에 작성된 코드를 레이아웃별로 컴포넌트를 나눠 생성하겠습니다.

function App() {
	return(
		<div>
			<Header style={{background-color:"blue", color:"white"}}>
				<h1>헤더 입니다.<h1>
			</Header>
			<main >
				메인 콘텐츠 입니다.
			</main>
			<Footer style={{background-color:"gray", color:"white"}}>
				푸터 입니다.
			</Footer>
		</div>
	)
}

export default App;

⚠ 컴포넌트 생성시 첫 문자는 대문자로 해야합니다. ⇒ 컴포넌트로 인식

export default function Header() {
	return (
		<header>
			<h1>헤더 입니다.<h1>
		</header>
	)
}

export default function Main() {
	return (
		<main>
			메인 콘텐츠 입니다.
		</main>
	)
}

export default function Footer() {
	return (
		<footer>
			푸터 입니다.
		</footer>
	)
}

컴포넌트 조합하기

생성한 컴포넌트를 조합하여 하나의 페이지를 구성합니다.

export default function App() {
	return (
		<div>
			<Header />
			<Main />
			<Footer />
		</div>
	)
}

이런식으로 컴포넌트를 분리하여 조합하면 가독성이 향상되고, 유지보수를 쉽게 할 수 있습니다.