react Component

Component 문법이란 ?

리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다.
Component라고 합니다. 이걸 이용하면 함수 만들듯, 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽂아넣을 수 있다.

Component 만드는법

• function을 이용해서 함수를 하나 만들어주고 작명합니다.
• 그 함수 안에 return () 안에 축약을 원하는 HTML을 담으면 됩니다.
• 그럼 원하는 곳에서 <함수명></함수명> 사용하면 아까 축약한 HTML이 등장합니다.

ex )

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

react return 문 안에는 병력 div 를 사용할수 없다. 병렬을 사용하고 싶으면 큰 div 를 감싸 주어야한다.

컴포넌트로 만들면 좋은것

• 반복적인 html 을 축약할때
• 큰 페이지
• 자주변경되는 것들