리액트 - Component

리액트는 긴 HTML을 한 단어로 치환해서 넣을 수 있는 문법을 제공하는데 이를 Component라고 한다.

function App (){
  return (
    <div>
      (생략)
      <Modal/>
    </div>
  )
}

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

컴포넌트 사용 방법

1. 함수를 하나 만든다.
2. 그 함수의 return으로 원하는 HTML태그를 담는다.
3. 사용을 원하는 곳에 <함수명/>을 입력하면 HTML이 등장한다.

이렇게 축약한 HTML덩어리를 Component 라고 부른다.
Component를 만들 때 함수명 첫 글자는 영어대문자로 보통 작명한다. 그리고 return() 안엔 하나의 html태그만 들어갈 수 있고 함수를 App(){} 내부에 만들면 안된다. 이는 App 역시 Component이기 때문이다.

컴포넌트로 만들면 좋은 태그들

• 사이트에 반복해서 출현하는 HTML 태그들
• 내용이 자주 변경되는 HTML 태그들
• 다른 페이지를 만들고 싶을 때 그 페이지의 내용
• 다른 팀원과 협업할 때 웹페이지를 Component 단위로 나누어 작업

함수 문법을 긴 코드 축약할 때, 재사용할 때, 복잡한 코드를 작은 기능으로 나눌 때 사용하듯이 컴포넌트도 용도, 사용시기가 비슷하다.