[React_study] 많은 div들을 한 단어로 축약하려면 (Component)

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

리액트는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법을 제공한다.

이를 Component라고 하며 Component를 이용하면 함수 만들듯, 변수 만들듯 HTML을 깔끔하게 한 단어로 치환해서 원하는 곳에 꽃아넣을 수 있다.

 

* Component 예시 코드

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

function Modal(){
  return (
    <div className="modal">
      <h4>Title</h4>
      <p>Date</p>
      <p>Content</p>
    </div>
  )
}

1. function을 이용해서 함수를 하나 만들어주고 작명한다.
2. 그 함수 안에 return () 안에 축약을 원하는 HTML을 담으면 된다.
3.  사용을 원하는곳에서 <함수명></함수명>을 사용하면 아까 축약해두었던 HTML이 나타난다.

이렇게 축약한 HTML 모음을 Component 라고 부른다.

HTML 깔끔하게 축약해서 쓰고싶으면 Component 를 이용하는 방식을 사용한다.

레이아웃을 바로 파악이 가능하니 나중에 관리하기 유용하다.

---

* Component를 만들 때 주의점

• Component 작명할 때 대부분 첫글자는 영어대문자로 작명한다.
• function App(){} 내부에서 만들면 안된다.
  • 왜냐면 function App(){}또한 Component 생성 문법이기 때문이다.
• Component안에 Component를 만들진 않는다.
• <Component></Component>이렇게 사용해도 되고 <Component/>이렇게 사용해도 된다.
• return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없다.
  • 그래서 굳이 두개를 나란히 적고 싶으면 저렇게 하나의 div로 또 감싸거나 해야합니다.
  • 의미없는 div쓰기 싫으면 <></> 이걸로 감싸도 된다. fragment문법이라고 한다.

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

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

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

 

* arrow function을 사용해도 된다.

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

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

 

* 어떤 HTML들을 Component로 만드는게 좋을까?

• 기준은 따로 없지만 관습적으로 아래의 내용들을 많이 사용한다.
• 사이트에서 반복해서 출현하는 HTML 모음들은 Component로 만들면 좋다.
• 내용이 매우 자주 변경될 것 같은 HTML 부분을 잘라서 Component로 만들면 좋다.
• 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 Component로 만드는게 좋다.
• 또는 다른 팀원과 협업할 때 웹페이지를 Component 단위로 나눠서 작업을 분배하기 좋다.
  
  

* Component의 단점

• HTML을 깔끔하게 쓰려고 Component를 많이 만들면 그것 만으로도 관리가 어렵다.
• 함수안의 변수를 다른 함수에 공유  할 수 없어서 props라는 문법을 이용해 state를 전달해야한다.