[React] Component 만들기

Component

HTML을 한단어로 줄여서 쓸 수 있는 방법

 

Component 만들기

1. 함수로 이름짓기

2. return. ( )안에 축약 원하는 HTML 넣고,

3. 원하는 곳에서 <함수명/>

 

주의사항

1. 이름은 대괄호로 한다

2. return( ) 안에 div 여러개 할 수 없다. 태그 하나로 묶어야 한다.

의미없는 div 쓰기 싫으면 <> </>로도 묶을 수 있다.

3. function App()과 나란히 컴포넌트 만들면 된다.

function 컴포넌트이름() {
	return (
    	<>
        	HTML 축약
        </>
    )
}

 

장점

1. HTML 축약해서 쓸 수 있어서, 컴포넌트로 만들어 관리가 편해짐.

2. 너무 많이 만들면 관리가 힘들기 때문에, 꼭 필요한 것만 만드는 것이 좋다.

-> 반복적으로 나오는 HTML 덩어리를 컴포넌트로 만드는 것이 좋다.

-> 자주 바뀌는 HTML UI들

-> 다른 페이지 만들때도 컴포넌트로 만든다.

 

단점

컴포넌트 안에서 state를 사용해 데이터 바인딩하고 싶을 때 복잡해진다.

-> 상위 컴포넌트에서 만든 state를 쓰려면 데이터를 전해주어야 한다. props 문법을 사용한다.