많은 div을 한 단어로 줄이는 component문법

리액트에서 html구조를 짤 대 return안에는 여럿 div를 만들면 안된다.

return {
		<div></div>
    		<div></div>
    		<div></div>
}

이렇게 짤 순 없고, 한 div로 묶어서 사용해야한다.

이렇기에 div가 많아질 수 밖에 없는데, 이럴때 유용한게 component라는 문법이다.

 

먼저, function App( ) { } 의 밖에 함수를 만들고 이름을 지은 후, 축약할 html을 넣고 원하는 곳에서 사용해주면 된다.

예를 들면,

function Modal() {
  return (
    <div className="modal">
        <h2>제목</h2>1분 42초
        <p>날짜</p>
        <p>상세내용</p>
    </div>
  )
}

이런 식으로, 만든 후,

<Modal></Modal> //<Modal />이렇게 사용해도 같음

이렇게 사용하면 된다.

component유의사항으론

1. 이름은 대문자로 시작하게 하며,

2. return 소괄호 안에도 div태그여러개 나열은 불가능하며, 만약, 의미없는 div로 묶기 싫으면 <> </>로 묶을 수 있음(fragments문법)

 

어떤걸 component로 만들까 하면

1. 반복출현하는 html 덩어리나,

2. 자주 변경되는 html UI들이나,

3. 다른 페이지 만들 때도 사용한다.

 

하지만, 단점으론 state 쓸 때 범위 때문에 props문법을 사용해야 한다.