[REACT] Component

Component 란?

HTML을 한 단어로 줄여서 사용할 수 있는 문법.

 

컴포넌트 만들기

1 함수를 만들고 이름을 짓는다.

 

2 축약을 원하는 html을 넣는다.

 

3 원하는 곳에 <함수명/>을 입력하고 사용한다.

function Modal(){
	return(
    	<div className="modal">
        	<h2>제목</h2>
            <p>날씨</p>
            <p>상세내용</p>
        </div>
    );
};

//사용할 때
<Modal/>

컴포넌트 특징

- 이름은 대문자로 시작한다.

- return() 안에 태그 하나로 묶어줘야 한다.

- 의미없는 <div>를 사용하기 싫을 때 <>, </>를 사용할 수 있다.

 

- 장점 : 컴포넌트를 사용하면 관리가 편해진다.

- 단점 : state를 쓸 때 복잡해진다. 상위 component에서 만든 state를 쓰기 위해 props 문법을 사용해야한다.

- 만드는 기준

반복출현하는 html 덩어리들

자주 변경되는 html ui들

다른 페이지를 만들 때도 컴포넌트를 만든다.

 

※ 컴포넌트 만들 때 주의할 점

return(
	<div></div>
    <div></div>
    <div></div>
)

이렇게 연속된 div 태그를 사용할 수 없으면 반드시 한 태그 안에 넣어줘야 한다.