1. 컴포넌트란?

• 리액트는 여러 컴포넌트 조각으로 구성되어 있다.
• <div>가 좀 많을 것 같을 때 많은 HTML을 한 단어로 깔끔하게 축약할 수 있는 Component 문법을 이용한다.
• 어떤 HTML들을 Component 만드는게 좋을까
  • 사이트에 반복해서 출현하는 HTML 덩어리들은 Component로 만들면 좋다.
  • 내용이 매우 자주 변경될 것 같은 HTML 부분을 잘라서 Component로 만들면 좋다.
  • 다른 페이지를 만들고 싶다면 그 페이지의 HTML 내용을 하나의 컴포넌트로 만드는게 좋다.
  • 다른 팀원과 협업할 때 웹페이지를 컴포넌트 단위로 나눠서 작업을 분배하기도 한다.
  • 그냥 함수 문법이랑 똑같이 생각하고 꼭 필요한 곳에만 사용하는 게 중요하다.

1. 컴포넌트 만들기

ex) 상세페이지 겸 모달창 UI를 하나 만들기.

1. function을 이용해서 함수를 하나 만든다.

   function 예시컴포넌트(){
     return (
       <>
         <div>안녕</div>
         <div>안녕</div>
         <div>안녕</div>
       </>
     )
   }
   

2. return () 안에 HTML을 넣는다.

   function 예시컴포넌트(){
     return (
       <>
         <div>안녕</div>
         <div>안녕</div>
         <div>안녕</div>
       </>
     )
   }
   

3. 원하는 곳에 <Modal></Modal>을 사용한다.

function App (){
  return (
    <div>
      HTML 잔뜩있는 곳
      ...
      <Modal></Modal>
    </div>
  )
}

1. Component 특징과 단점

• Component의 특징

  1. Component 이름지으실 땐 영어대문자로 보통 시작한다.

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

  [잘못된 예시]

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

  [올바른 예시]

  <div> 혹은 <fragment>로 묶어야 한다. (<> </>도 fragment)

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

  3. component 위치는 function App(){} 과 나란히 만들어준다.
  • function App(){}도 컴포넌트인데, 컴포넌트용 function 안에다가 컴포넌트용 function을 사용하진 않는다.
  4. component 안에 미리 만들어둔 component 집어넣을 수도 있다.

• Component의 단점

  • 컴포넌트가 App(){} 안에 있는 state를 사용하고 싶을 때 바로 사용불가능하다. props라는 문법을 이용해서 state를 <Modal>에 전달해야 한다.