[React] Component

Component

컴포넌트는 복잡하고 긴 HTML을 한 단어로 치환할 수 있습니다!
컴포넌트를 사용하면 함수나 변수를 만들듯이 HTML을 깔끔하게 한 단어로 치환하여 원하는 곳으로 넣을 수 있습니다 :)

---

📜 줄이는 방법

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

function Modal(){
  return (
    <div>
      <h4>제목</h4>
      <p>상세내용</p>
    </div>
  )
}

1. function을 이용해서 함수를 만들어주기
2. 만든 함수 return () 안에 축약을 원하는 HTML 담기
3. 원하는 곳에서 <함수명></함수명> 사용하면 축약한 HTML 사용 가능

이렇게 축약한 HTML을 Component 라고 합니다!

---

Component 만들 때 주의점

1. component 는 보통 영어 대문자로 작명

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

return(
  <div></div>
  <div></div>
)

( X )

return(
 <div>
   <div></div>
   <div></div>
 </div>
)

( O )

3. function App() {} 은 내부에서 만들면 안 됨

---

Component 로 만들면 좋은 HTML 들

관습적으로 Component화하는 HTML들은?

• 사이트에 반복 출현하는 HTML 덩어리들

• 내용이 자주 변경될 것 같은 HTML 부분

• 다른 페이지를 만들 때, 그 페이지의 HTML을 하나의 Component로!

---

Component의 단점

HTML 깔끔하게 쓰려고 Component를 무수히 많이 만들면 그것만으로도 관리하기가 힘들어집니다 🥲
예를 들면..! function Modal 안에서 글제목 state를 쓰고 싶을 경우 {글제목} 이렇게 쓰면 안 됩니다
왜냐? 자바스크립트에선 한 function 안에 있는 변수를 다른 function에서 맘대로 쓸 수 없기 때문입니다
props 문법을 사용해서 state를 까지 전해줘야 비로소 사용 가능합니다

👏 잡다한 것을 Component 화하지말고, 꼭 필요한 곳만 Component 화해야 합니다

---