div 너무 많으면 Component

컴포넌트 만드는 법

1. function 만들고
   1. 다른 function 바깥에 만들기
   2. 함수 이름은 영어 대문자로 시작
2. return() 안에 html 담기
3. <함수명></함수명> 쓰기

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

(참고1)

return () 안에 html 병렬기입 하려면

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

• <></> 사용가능

(참고2)

• <함수명></함수명>
• <함수명/>

둘 다 사용 가능

<Modal></Modal>
<Modal/>

어떤 걸 컴포넌트로 만들면 좋은가

1. 반복적인 html 축약할 때
2. 큰 페이지들
3. 자주 변경되는 것들

컴포넌트의 단점

state 가져다 쓸 때 문제 생김

⇒ A 함수에 있던 변수는 B 함수에서 맘대로 가져다 쓸 수 없음

(참고) 컴포넌트 만드는 문법2

const Modal = () => {}
Modal = 123;