React Component : div 한 단어로 줄이고싶으면

복잡한 html을 한 단어로 치환할 수 있는 Component 문법

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이 등장함

이렇게 축약한 HTML 덩어리를 Component라고 함

---

Component 만들 때 주의점

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

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

3. function App(){} 내부에서 만들면 안되고 따로 바깥에 빼서 써야함

왜냐면 function App(){} 이것도 다시보니 컴포넌트 생성문법이기 때문에 안댐

component 안에 component 를 만들진 않음

4. <컴포넌트></컴포넌트> 이렇게 써도 되고 <컴포넌트/> 이렇게 써도 됨

---

항상 막 쓰지말고 ; 어떤 HTML들을 Component 만드는게 좋을까

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

• 내용이 매우 자주 변경될 것 같은 HTML 부분을 잘라서 Component

• 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 Component

• 다른 팀원과 협업할 때 웹페이지를 Component 단위로 나눠서 작업을 분배하기도함

---

Component의 단점

개나소나 아무데나 막 만들어서 쓰면 다른 Component에 있는 변수 못쓰게되서 막 어지러움

한 function 안에 있는 변수를 다른 function에서 맘대로 쓸 수 없잖슴