리액트 : div 너무 많을 땐 Component

Component 사용하면 좋은 경우

1. 반복적인 html 축약시

2. 큰 페이지

3. 자주 변경되는 것들

 

 

 

 

 

Conponent 만들기

 

1. function 만들기

    (단, 기존 function App() {} 여기 밖에 만들어줘야 함!

function Modal() {               <---- 요게 Component
            
}

 

 

2. return() 안에 html 담기

function Modal() { 
     return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>    
                                             // <div>또 사용 불가!</div> 
);
}

 

 

3. 사용 방법 : <함수명></함수명> 쓰기

    (이건 기존 function App() {} 여기 안에!)

<Modal></Modal>
또는
<Modal />