Component

Component

함수나 변수를 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에서 사용이 가능하다.

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

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

1. function을 이용해 함수를 만든다.
2. 그 함수 안에 return () 안에 원하는 HTML을 작성
3. 원하는 위치에 <함수명></함수명>

이렇게 축약한 HTML 덩어리를 Component 라고 부른다,

주의점

1. component 작명 시, 영어 대문자로 시작한다.

2. return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없다.

   function 불가능() {
   	return (
   		<div></div>
   		<div></div>
   	)
   }

3. <컴포넌트></컴포넌트> 또는 <컴포넌트/> 라고 쓸 수 있다.

arrow function

function Modal(){
  return ( <div></div> )
}

let Modal = () => {
  return ( <div></div>) 
}

let 대신에 const 변수를 쓰기도 한다.

Component화 하는 기준

• 반복해서 출력하는 HTML 요소들
• 내용이 자주 변경될 것 같은 HTML 부분
• 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 컴포넌트로 만든다.