reactjs에서 component로 편리하게 HTML덩어리 관리하기

1. 개요

• 컴포넌트는?
  • 반복적으로 출현하는 HTML덩어리를 쉽게 생성할 수 있게 해주는 도구
  • 커다란 페이지를 컴포넌트화 해두면 편함
  • 자주 변경되는 UI를 컴포넌트화 해두면 편함
• 함수 만들고, return() 안에 HTML 담고, <함수명></함수명> 형태로 쓰면 됨(<함수명/>도 됨)
• 함수 규칙은 다른 함수의 밖에 만들 것, 첫글자를 영어 대문자로 만들 것

2. 코드

function Card() {
	return(
    	<div>
        	<h1>카드임</h1>
        </div>
    )
}

• 이 코드는 Card라는 이름의 컴포넌트를 만드는 코드임
• function 뒤에 컴포넌트의 이름을 쓰면 되고
• return 뒤에 내가 컴포넌트로 만들고 싶은 HTML코드를 넣어주면 됨

function App() {
	return(
    	<div>
        	<Card></Card>
        </div>
    )
}

function Card() {
	return(
    	<div>
        	<h1>카드임</h1>
        </div>
    )
}

• 이런식으로 코드 짜면 메인페이지에 내가 만든 컴포넌트를 쓸 수 있음
• <컴포넌트명></컴포넌트명> 요렇게 써주면 되는거임
• 근데 보다 보니까 App()이것도 걍 컴포넌트네? 싶을거임
• 맞음 메인 페이지도 컴포넌트의 일종이고, 컴포넌트 안에 컴포넌트를 넣을수도 있는거임